Importing external SCSS files with full paths - not working [duplicate] - sass

This question already has answers here:
Can I import an externally hosted file with sass?
(6 answers)
Closed 6 years ago.
I am trying to import the variables file into a sub-project. I want to have a single variables file, which would give theme to the both main and sub-project.
Hence, I am importing the variables file by using the full path in my sub-project, like :
#import "http://main-project-url/scss/_variables.scss";
OR
#import url("http://main-project-url/scss/_variables.scss ");
However, I am getting errors while accessing those variables declared in _variables.scss file.
Can someone help me, please..!
Thanks in advance!
SuryaPavan

Because #import is overloaded in SASS, it's hard to tell but just because it compiles does not mean that the variables in .scss are getting interpreted.
You might look at remote-sass which purports to do what you ask:
RemoteSass is a small gem that allows Sass to import remote sass/scss
stylsheets over HTTP/S. With this, you can set up a central server to
serve your stylesheet assets and share css among your many
applications.

Related

How to import scss files from one project into another in Visual Studio

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" />
...

Angular Dart - Using sass files

I am trying to set up sass with Angular Dart but I'm a bit lost and couldn't find a documentation past 2016 (a good one)
I currently have the following structure:
However I cannot reference a main.css file as it is not found and if in a component I put something like this
styleUrls: ['lib/assets/sass/main.scss']
The webdev serve command fails
My pubscpec is
dependencies:
angular: ^5.0.0
angular_components: ^0.9.0
bootstrap_sass: any
dev_dependencies:
angular_test: ^2.0.0
sass_builder: ^2.1.1
build_runner: ^0.10.0
build_test: ^0.10.2
build_web_compilers: ^0.4.0
mockito: ^3.0.0
test: ^1.3.2
I cannot figure out what's wrong and also the structure I should use
Should I put in my top component main.scss (or the compiler main.css) and do not set any other file reference or should I include it at every component? And also how can I generate this compiled file when I run webdev serve
Thanks,
Alexi
So the references for styleUrls should always be the compiled css not the Sass file. Also the Urls need to be either relative to the file, or package format. So either 'main.css' or 'package:your_project/assets/sass/main.css'
I would also suggest not having separate asset directories. I tend to find having the sass file next to the component to be easier to maintain.
AngularDart also has style encapsulation by default; meaning CSS won't leak outside of the Components by default. Given this I find it better to have the CSS local to that component and be next to that component. You'll find that is the pattern on the angular components, and gallery.
One small note on the components, and gallery. They use the pattern style.scss.css instead of style.css which breaks the convention of Sass. The reasoning behind it is so that we can quickly tell what the source of the CSS file was. Was it written by hand, or did it come from Sass. This is achieved by having different settings in the build.yaml file. I don't think you should do this for your project tho.

Is it possible to compile complie seperate module that depend on only one library in SASS?

For example, a lot of the SASS I have been writing require and use the mixins from bootstrap. However, I would like everything to not be complied into one large file. So for example in a main.scss I could have:
#import 'bootstrap/assets/stylesheets/_bootstrap';
#import '_mypage'
#import '_mypage2'
but when you compile the file it would just end up as one file where I am trying to get it so I have bootstrap, mypage, and mypag2 as separate css file, while maintain the ability to use the bootstrap.
Is there a way to do this in sass? Or should I be looking at certain tools to achieve this goal?
IIRC, the _ in front of SCSS files is what tells the compiler not to make its own file. What you're telling the compiler with your #import lines is that you want all of those files to be added to the top of your main.scss.
If you make a mypage.scss, and put it in the same directory where the compiler is looking, it will compile to its own file. You can either import bootstrap at the top of that file as well, or just load earlier it in your HTML to be able to reference it.

Singularity.gs: helpers _box-sizing.scss and _clearfix.scss not included into _helpers.scss

I'm currently working with singularity.gs v1.7.0 and I noticed that the helper files _box-sizing.scss, and _clearfix.scss, are not included into the _helpers.scss file. I did had the same experience with singularity.gs v1.6.2.
Here is how I'm including singularity.gs into my SASS code and also how I'm going around this issue:
#import "_singularitygs.scss";
// for some reason the content bellow wasn't called from inside singularity
#import "singularitygs/helpers/_box-sizing.scss";
#import "singularitygs/helpers/_clearfix.scss";
// end of missing libraries
Can somebody confirm if this is a bug or not, and what would be the preferable procedure to including these two files?
Unfortunately I wasn't able to find a clear answer on the documentation.
Thank you

Import SASS files by reference

LESS CSS has got the feature where one can include a LESS file by reference. Is this or something similar possible via SASS through the #import directive?

Resources