I am having issues sharing scss files between projects in Visual Studio (2019) compiled using Gulp tasks ran by VS' Task Runner.
I have one ASP.NET Core (2.2) website which uses MVC areas. Each area is located in a different Razor class library project. Areas are mostly independent, but they do share some styles, such as styling the header, controls, colors, normalization, etc. I have one class library which is shared by all RCLs. Base controller, ViewModel implementation etc. I put shared scss files over there as well. I put RCL-specific scss files where they should go, and instructed task runner to execute gulp task which will compile scss files for that RCL before building it. Resulting css is then set to copy always to publish directory, which works nicely.
RCL structure:
- Areas
- Styles
--- main.scss
--- _partial1.scss
--- ...
--- _partialN.scss
--- _shared-"add as link".scss from elsewhere
- wwwroot / css / generated-css-goes-here.css
main.scss content:
@import "shared-dependency1";
...
@import "shared-dependencyN";
@import "partial1";
...
@import "partialN";
I hoped this would work, but instead I get:
events.js:173
throw er; // Unhandled 'error' event
^
Error: Styles\main.scss
Error: File to import not found or unreadable: _colors.scss.
on line 2 of Styles/main.scss
>> @import "_colors.scss";
So, linking shared files doesn't seem to work. Before I try some arcane ways to get my shared files, I decided to shoot you guys a question here, in case someone solved this problem already and is willing to share.
I realized I don't really need to bother with linking shared files. I opted to use relative paths to the actual locations and it works. If someone has a better solution, feel free to comment / add another answer.
main.scss in RCL:
@import "../../Common/Styles/colors";
...
_partialX.scss in RCL:
/// <reference path="../../Common/Styles/colors" />
...