Sass #use not loading partial - css

I'm trying to import a sass partial (_variables.scss) to use in my main stylesheet (global.scss), but I keep getting the Error: Undefined variable. on sass compiling.
Directory structure:
app
└─public
└─styles
│ global.css (output for sass compiling is here).
└─sass
└─_variables.scss
└─global.scss
_variables.scss
$font-text: 'lato', sans-serif;
global.scss
#use '_variables';
body {
font-family: $font-text;
}
Looking at the Sass documentation, I understand to use #use instead of #import (which works) because they are phasing it out.
What am I doing wrong here? Thanks.

That's because you are not using Dart Sass which supports this feature.
Also in the documentation you will find:
Only Dart Sass currently supports #use. Users of other implementations must use the #import rule instead.
So use #import until #use is supported.
BTW, If you want to use Dart Sass, just use sass instead of node-sass and require it in the webpack config, like:
// ...
{
loader: 'sass-loader',
options: {
implementation: require('sass')
}
}
// ...

This is a very important update to the accepted answer by #llobert. After hours of searching, it turns out node-sass relies on libsass which is the C++ implementation of sass. According the docs for the libsass repository this C++ implementation has been deprecated.
Okay, so you may think, as easy as installing dart-sass, however you will find the docs have fallen behind here as well. If you go to dart-sass on npm you'll find:
So what you have to do now is:
npm install sass
And just in case, like myself, the reader of this is researching the whole sass affair because they are using gulp-sass:
At the bottom of the gulp-sass npm page you will find this tid bit.
Ah, what do you know. The default hasn't changed, but the underlying libsass libary has fallen behind due to depreciation. Thus you must add this to your gulp file:
var sass = require('gulp-sass');
sass.compiler = require('sass');
So long story short, there are some changes going on in the SASS world that have been drastic, but yet seemingly happened very quietly. I hope this recount of my last few hours will save some future devs a lot of time searching till the docs get sorted out.

Short Answer
You can access variables, functions, and mixins from another module by writing < namespace >.< variable >, < namespace >.< function>()>, or #include < namespace >.< mixin >(). By default, the namespace is just the last component of the module’s URL.
That means by using variables.$font-text
global.scss
#use '_variables';
body {
font-family: variables.$font-text;
}
SASS Documentation on Loading Members
Long Answer
So the answer or #llobet was using webpack and the answer of #Jamie Marshall was using gulp file, but I was trying to use SASS using Node JS and needed a step by step guide to make it work.
Here is how I made #use work - Step by step guide using Dart Sass with Node JS.
1. Create New Node Project
npm init
2. Install Dart SASS
npm i sass
Optionally you can also install AutoPrefixer using npm install postcss-cli autoprefixer
3. Configure NPM Script to Compile SASS
In Package.json, add script compile:sass to compile sass to css
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"compile:sass": "sass --watch scss:assets/css"
},
4. Create SCSS folder and inside it create style.scss file
Above script compile:sass expects a folder called scss on the root of the project and a .scss file inside that folder
Paste the following inside .scss file
#use '_variables';
body {
font-family: variables.$font-text;
}
5. Create Partial file _variables.scss
Create a partial file named _variables.scss on the same directory scss and paste the following code in it
$font-text: 'lato', sans-serif;
6. Compile SASS to CSS
Run the following script inside your project's root folder to compile SASS to CSS
npm run compile:sass
Now you would see a folder named assets and inside it there would be a folder named css and inside it your css file would be compiled.

Related

How to edit css through scss files

Actually for a recent project i downloaded a theme (Admin Panel). It mostly contains css in parts in the form of .scss files . I tried editing files directly from style.css but nothing seems to change . so i did little bit of research and found that scss files need to compiled again . I don't know how to compile .scss files. On their github page i found that it can be changed with the help of following commands
gulp serve
I don't know the above command was to compile again scss into css but it didn't work
So ,kindly help with this or just a provide a link to the tutorial from where i could learn this
Here's the link for the project that i have just downloaded
https://github.com/BootstrapDash/PurpleAdmin-Free-Admin-Template
Thanks in Advance
Setting up a SCSS compiler for a project where you don't use SCSS yourself is tedious. Instead, try compiling it quickly and edit the CSS files after you compiled it.
You can use free compilers online, for example https://www.cssportal.com/scss-to-css/.
If you would like to start a project with SCSS where you compile it, you can indeed use the GULP setup provided by Bootstrap.
https://mdbootstrap.com/bootstrap-gulp-tutorial/
You can also easily setup Gulp yourself:
https://codehangar.io/gulp-sass/
The above URL explains the following a little more extensive:
npm install gulp-sass --save-dev
Structure:
-index.html
--assets
---styles
----sass
-----index.scss
----css
The 'styles' Task
//gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
//style paths
var sassFiles = 'assets/styles/sass/**/*.scss',
cssDest = 'assets/styles/css/';
gulp.task('styles', function(){
gulp.src(sassFiles)
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest(cssDest));
});
Watcher
gulp.task('watch',function() {
gulp.watch(sassFiles,['styles']);
});
gulp watch

Bundle sass files into single sass file

TL;DR: My question is how to bundle some of my sass files into single sass file?
I've been developing an Angular component library and I package it with ng-packagr. Let's call it #my-lib/ngx-components.
Consumers of my lib will import my components like #my-lib/ngx-components/navbar.
I decided to add theming support to components.
For example, I have a navbar component with default colors (background, text, hover etc.) I want consumers of my library to be able to override these colors with their own theme. That's why I've written a mixin which takes a $theme input and override some css rules as follows (this is a basic version of what I have)
_navbar-theme.sass
#mixin navbar-theme($theme)
$primary-color: map-get($theme, primary-color)
$secondary-color: map-get($theme, secondary-color)
$color: map-get($theme, color)
.navbar
background-color: $primary-color
color: $color
&:hover
background-color: $secondary-color
Each component has its own *-theme.sass file.
I also have global _theming.sass file which imports all of these as follows
_theming.sass
#import './components/navbar/navbar-theme'
#import './components/button/button-theme'
#import './components/dropdown/dropdown-theme'
I want to export this _theming.sass file from my lib, so people can import this file in their own sass file as #import '~#my-lib/ngx-components/theming' and start using all of the mixins available.
If they want to have custom navbar, button etc, they should be able to use those mixins with single import.
I tried to make it look like angular-material theming setup.
At first, I have tried node-sass which is already in my dependencies. But, it tries to build sass into css so it omits mixins in the output file.
Then, I looked at what angular-material has done. They use scss-bundle
I thought "this is exactly what I want." However, it requires scss files, not sass files. It cannot read sass files.
Then, I thought "Okay, I can give up on sass and start using scss. How do I convert all those files to scss without going through them by hand". Then, I found sass-convert. In this question it was said that I can use it within command line. However, when I install sass-convert with npm globally, it didn't give me a command line executable. I think I need Gulp to use it.
I've been avoding to use Gulp from the beginning, because it means another tool to learn and it adds complexity to codebase.
At this point, I feel like "Hal fixing light bulb"
TL;DR: My question is how to bundle some of my sass files into single sass file?
Also, If you can come up with a solution that requires webpack, that's fine too.
Let's through your opinion or questions:
I want to export this _theming.sass file from my lib, so people can
import this file in their own sass file as #import
'~#my-lib/ngx-components/theming' and start using all of the mixins
available. If they want to have custom navbar, button etc, they should
be able to use those mixins with single import.
You need to know, what is your target audience. Mostly people using angular cli for create their app like template scratch.
So you need provide css bundle (people just want import your css) and sass bundle (who want to use your object or your mixin).
I want to export this _theming.sass file from my lib, so people can
import this file in their own sass file as #import
'~#my-lib/ngx-components/theming' and start using all of the mixins
available. If they want to have custom navbar, button etc, they should
be able to use those mixins with single import.
I tried to make it look like angular-material theming setup.
Firstly, you need to know that #angular/material doesn't export sass (they use scss) but they export css thene compiled by scss-bundle (as you mention it) see their code and documentation theme.
I thought "this is exactly what I want." However, it requires scss
files, not sass files. It cannot read sass files.
I would like quote this answer:
Sass is a CSS pre-processor with syntax advancements. Style sheets in
the advanced syntax are processed by the program, and turned into
regular CSS style sheets. However, they do not extend the CSS standard
itself.
It is better you need transfer your code from sass to scss (by yourself), it would not much to do it (I think, I always write scss instead sass file).
Solution:
1. Provide css and sass (scss better)
When you deliver your component libs, You have to provide css and scss. Beacuse angular cli doesn't provide scss loader by default.
Don't use sass file, use scss file see my refer answer on top.
scss-bundle + webpack
Since you have to provide css, you can you webpack shell plugin to bundle scss. Scss have provide cli, if you want to use cli.
2. Structure your scss
Okay, let's take sample from bootstrap#4 module for this case. Bootstrap use structure like this (Documents):
scss
|-- _variables.scss
|-- _mixins.scss
|-- _functions.scss
|-- ...
|-- index.scss
inside index.scss will have like this:
#import 'variables'
#import 'mixins'
#import 'functions'
...
so, this scss you have to deliver beside css. Like bootstrap do, then mixin will available to consumer. Also this good approach when consumer to find scss file in scss folder (easy to pointing which is scss put in).
UPDATE
For bundle to single file you have to create task runner to do it. In your case you want to use webpack, you can create a plugin to do it.
Here example plugin:
scss-bundle-plugin.js
call to you config webpack:
plugins: [
new webpack.NoEmitOnErrorsPlugin(),
new SCSSBundlePlugin({
file: path.join(__dirname, 'src/index.scss')
})
],
To try playground, checkout hello-world-loader then:
# install dependency
npm install
# try play ground
npm run webpack
it will create file _theme.scss at ./dist.
My advice don't use webpack, use task runner instead (gulp or grunt) for this simple case. Webpack too advance and hard to write task.
There is also a widely used package, called scss-bundle.
It is quite simple to use, you just create a config file with all relevant configuration and then run scss-bundle.
This for example will use all scss files, imported in entry.scss and move it to out.scss. All imports will be resolved, except for angular themes in this example, like #import '~#angular/material/theming';.
scss-bundle.config.json:
{
"bundlerOptions": {
"entryFile": "my-project/src/entry.scss",
"outFile": "dist/out.scss",
"rootDir": "my-project/src",
"project": "../../",
"ignoreImports": [
"~#angular/.*"
],
"logLevel": "debug"
}
}
My solution for scss / sass files
I've used small module bundle-scss
It bundles files by file name mask. So you need to pass correct mask like ./src/**/*.theme.scss specify destination file and maybe your custom sort-order
You don't have to create one entry point file with all imports. bundle-scss will get all files by mask analyze all imports and include this files as well

Why can't gulp compile a SASS file which imports a CSS file created by a previous gulp task?

I have a project which a dependency on Bootstrap. I'm customising the Boostrap variables so using gulp to do a custom compile of Bootstrap's LESS source. The rest of the CSS in my project is written with SASS. I have an imports.sass file which includes the following line:
#import '../bootstrap/compiled/custom-bootstrap';
What I'm trying to do is compile the Bootstrap LESS to CSS, then run a SASS task to create a CSS file which includes the compiled Bootstrap CSS. My 2 gulp tasks which achieve this are as follows:
gulp.task('bootstrap', function () {
return gulp
.src('assets/bootstrap/custom-bootstrap.less')
.pipe(less())
.pipe(gulp.dest('assets/bootstrap/compiled'));
});
gulp.task('sass', function () {
return gulp
.src('assets/scss/*.scss')
.pipe(sass({
includePaths: ['assets/bootstrap/compiled']
}).on('error', sass.logError))
.pipe(gulp.dest('assets/css'));
});
The first time I run this, the bootstrap task completes successfully, but the sass task throws this error:
Error in plugin 'sass' Message:
assets\scss\_imports.scss Error: File to import not found or unreadable: ../bootstrap/compiled/custom-bootstrap
Parent style sheet: [path/to]/assets/scss/_imports.scss
on line 5 of assets/scss/_imports.scss
>> #import '../bootstrap/compiled/custom-bootstrap';
^
When I run it a second time both complete successfully so clearly the problem is the fact that custom-bootstrap.css doesn't exist at the start of the initial run. However, you can see I've added the relevant includePaths option which seems to be the solution for other similar issues elsewhere on SO. Perhaps I'm not specifying this path correctly?
To complete the information you need, here is the structure of my solution detailing the relevant files. I'm confident the paths I've used are correct but just in case I've missed something...
assets
bootstrap
custom-bootstrap.less
custom-variables.less
scss
_imports.scss
main.scss
gulpfile.js
In case it's relevant, this is the front-end for an ASP.NET solution so I'm using Visual Studio's task runner to execute the gulp tasks, and this also explains why gulpfile.js is in the root of the project.

Compile css and sass files to single css file using gruntjs

I have a bootstrap.css file which I want to compile with my custom styles from style.sass into single output file, for example - style.css.
For sass compilation I use gruntjs with grunt-contrib-sass extension. My Gruntfile.js config for sass looks like this:
sass: {
dist: {
options: {
//style: 'compressed',
style: 'expanded',
lineNumbers: true
},
files: {
'build/styles/style.css': 'src/styles/style.sass'
}
}
}
I've tried to import bootstrap.css into sass file, but instead it only generates next code in output css (which is correct behavior http://sass-lang.com/documentation/file.SASS_REFERENCE.html#import):
#import url(bootstrap.css);
.....
/*my style.sass rules*/
I even tried to list multiple files in order of concatination and processing, like in uglifier settings:
files: {
'build/styles/style.css': ['src/styles/bootstrap.css', 'src/styles/style.sass']
}
But this only adds bootstrap.css into final style.css file ignoring style.sass existence.
As I'm new in gruntjs, I can't figure out how this should be done properly.
The Grunt configuration is correct. The reason your file is not being imported is because of the way SASS is designed to work.
The SASS documentation states:
By default, it looks for a Sass file to import directly, but there are a few circumstances under which it will compile to a CSS #import rule:
If the file’s extension is .css.
If the filename begins with http://.
If the filename is a url().
If the #import has any media queries.
Since the file you are importing has a .css extension it will therefore not be imported directly but remain a standard CSS #import.
You have three options to resolve this:
Rename the included file to _bootstrap.scss. (If you don't add the underscore a bootstrap.css will be created along with your main output file which is unnecessary.)
Include the Bootstrap SCSS source as a dependency of your project and build against that. Install the Bootstrap source using Bower by typing $ bower install bootstrap-sass-official in your project root folder. (For instructions on setting up Bower see the Bower website.) Then you can replace your import above with #import 'bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap';.
Use a concatenation library such as grunt-contrib-concat to combine Bootstrap.css and your main style sheet during your build process.
This first option is fine if you downloaded the bootstrap CSS file into your project manually, however, if you are including it as a dependency with npm/bower it is not ideal.
I would recommend the second option since building Bootstrap from source will not only solve your problem but allow for customization of Bootstrap variables to fit your theme rather than overwriting them with subsequent style rules as well. The only downside is that your build process might be slightly longer due to the rather large SASS build of the Bootstrap source.

Import regular CSS file in SCSS file?

Is there anyway to import a regular CSS file with Sass's #import command? While I'm not using all of the SCSS syntax from sass, I do still enjoy it's combining/compressing features, and would like to be able to use it without renaming all of my files to *.scss
After having the same issue, I got confused with all the answers here and the comments over the repository of sass in github.
I just want to point out that as December 2014, this issue has been resolved. It is now possible to import css files directly into your sass file. The following PR in github solves the issue.
The syntax is the same as now - #import "your/path/to/the/file", without an extension after the file name. This will import your file directly. If you append *.css at the end, it will translate into the css rule #import url(...).
In case you are using some of the "fancy" new module bundlers such as webpack, you will probably need to use use ~ in the beginning of the path. So, if you want to import the following path node_modules/bootstrap/src/core.scss you would write something like #import "~bootstrap/src/core".
NOTE:
It appears this isn't working for everybody. If your interpreter is based on libsass it should be working fine (checkout this). I've tested using #import on node-sass and it's working fine. Unfortunately this works and doesn't work on some ruby instances.
This was implemented and merged starting from version 3.2 (pull #754 merged on 2 Jan 2015 for libsass, issues originaly were defined here: sass#193 #556, libsass#318).
To cut the long story short, the syntax in next:
to import (include) the raw CSS-file the syntax is **without `.css`** extension at the end (results in actual read of partial `s[ac]ss|css` and include of it inline to SCSS/SASS):
#import "path/to/file";
to import the CSS-file in a traditional way syntax goes in traditional way, **with `.css` extension** at the end (results to `#import url("path/to/file.css");` in your compiled CSS):
#import "path/to/file.css";
And it is damn good: this syntax is elegant and laconic, plus backward compatible! It works excellently with libsass and node-sass.
__
To avoid further speculations in comments, writing this explicitly: Ruby based Sass still has this feature unimplemented after 7 years of discussions. By the time of writing this answer, it's promised that in 4.0 there will be a simple way to accomplish this, probably with the help of #use. It seems there will be an implementation very soon, the new "planned" "Proposal Accepted" tag was assigned for the issue #556 and the new #use feature.
UPD: on 26 October 2020 lib-sass was deprecated, therefore issue #556 was immediately closed.
__
answer might be updated, as soon as something changes.
Looks like this is unimplemented, as of the time of this writing:
https://github.com/sass/sass/issues/193
For libsass (C/C++ implementation), import works for *.css the same way as for *.scss files - just omit the extension:
#import "path/to/file";
This will import path/to/file.css.
See this answer for further details.
See this answer for Ruby implementation (sass gem)
You must prepend an underscore to the css file to be included, and switch its extension to scss (ex: _yourfile.scss). Then you just have to call it this way:
#import "yourfile";
And it will include the contents of the file, instead of using the CSS standard #import directive.
Good news everyone, Chris Eppstein created a compass plugin with inline css import functionality:
https://github.com/chriseppstein/sass-css-importer
Now, importing a CSS file is as easy as:
#import "CSS:library/some_css_file"
If you have a .css file which you don't wish to modify, neither change its extension to .scss (e.g. this file is from a forked project you don't maintain), you can always create a symlink and then import it into your .scss.
Creates a symlink:
ln -s path/to/css/file.css path/to/sass/files/_file.scss
Imports symlink file into a target .scss:
#import "path/to/sass/files/file";
Your target output .css file is going to hold contents from imported symlink .scss file, not a CSS import rule (mentioned by #yaz with highest comment votes). And you don't have duplicated files with different extensions, what means any update made inside initial .css file immediately gets imported into your target output.
Symbolic link (also symlink or soft link) is a special type of file
that contains a reference to another file in the form of an absolute
or relative path and that affects pathname resolution.
– http://en.wikipedia.org/wiki/Symbolic_link
You can use a third-party importer to customise #import semantics.
node-sass-import-once, which works with node-sass (for Node.js) can inline import CSS files.
Example of direct usage:
var sass = require('node-sass');,
importOnce = require('node-sass-import-once');
sass.render({
file: "input.scss",
importer: importOnce,
importOnce: {
css: true,
}
});
Example grunt-sass config:
var importOnce = require("node-sass-import-once");
grunt.loadNpmTasks("grunt-sass");
grunt.initConfig({
sass: {
options: {
sourceMap: true,
importer: importOnce
},
dev: {
files: {
"dist/style.css": "scss/**/*.scss"
}
}
});
Note that node-sass-import-once cannot currently import Sass partials without an explicit leading underscore. For example with the file partials/_partial.scss:
#import partials/_partial.scss succeeds
#import * partials/partial.scss fails
In general, be aware that a custom importer could change any import semantics. Read the docs before you start using it.
If I am correct css is compatible with scss so you can change the extension of a css to scss and it should continue to work. Once you change the extension you can import it and it will be included in the file.
If you don't do that sass will use the css #import which is something you don't want.
I figured out an elegant, Rails-like way to do it. First, rename your .scss file to .scss.erb, then use syntax like this (example for highlight_js-rails4 gem CSS asset):
#import "<%= asset_path("highlight_js/github") %>";
Why you can't host the file directly via SCSS:
Doing an #import in SCSS works fine for CSS files as long as you explicitly use the full path one way or another. In development mode, rails s serves assets without compiling them, so a path like this works...
#import "highlight_js/github.css";
...because the hosted path is literally /assets/highlight_js/github.css. If you right-click on the page and "view source", then click on the link for the stylesheet with the above #import, you'll see a line in there that looks like:
#import url(highlight_js/github.css);
The SCSS engine translates "highlight_js/github.css" to url(highlight_js/github.css). This will work swimmingly until you decide to try running it in production where assets are precompiled have a hash injected into the file name. The SCSS file will still resolve to a static /assets/highlight_js/github.css that was not precompiled and doesn't exist in production.
How this solution works:
Firstly, by moving the .scss file to .scss.erb, we have effectively turned the SCSS into a template for Rails. Now, whenever we use <%= ... %> template tags, the Rails template processor will replace these snippets with the output of the code (just like any other template).
Stating asset_path("highlight_js/github") in the .scss.erb file does two things:
Triggers the rake assets:precompile task to precompile the appropriate CSS file.
Generates a URL that appropriately reflects the asset regardless of the Rails environment.
This also means that the SCSS engine isn't even parsing the CSS file; it's just hosting a link to it! So there's no hokey monkey patches or gross workarounds. We're serving a CSS asset via SCSS as intended, and using a URL to said CSS asset as Rails intended. Sweet!
To import a regular CSS file into Sass:
Official Sass Documentation: Import CSS into Sass
Simple workaround:
All, or nearly all css file can be also interpreted as if it would be scss. It also enables to import them inside a block. Rename the css to scss, and import it so.
In my actual configuration I do the following:
First I copy the .css file into a temporary one, this time with .scss extension. Grunt example config:
copy: {
dev: {
files: [
{
src: "node_modules/some_module/some_precompiled.css",
dest: "target/resources/some_module_styles.scss"
}
]
}
}
Then you can import the .scss file from your parent scss (in my example, it is even imported into a block):
my-selector {
#import "target/resources/some_module_styles.scss";
...other rules...
}
Note: this could be dangerous, because it will effectively result that the css will be parsed multiple times. Check your original css for that it contains any scss-interpretable artifact (it is improbable, but if it happen, the result will be hard to debug and dangerous).
to Import css file in to scss simply use the this:
#import "src/your_file_path";
without using extension .css at the end
It is now possible using:
#import 'CSS:directory/filename.css';
I can confirm this works:
class CSSImporter < Sass::Importers::Filesystem
def extensions
super.merge('css' => :scss)
end
end
view_context = ActionView::Base.new
css = Sass::Engine.new(
template,
syntax: :scss,
cache: false,
load_paths: Rails.application.assets.paths,
read_cache: false,
filesystem_importer: CSSImporter # Relevant option,
sprockets: {
context: view_context,
environment: Rails.application.assets
}
).render
Credit to Chriss Epstein:
https://github.com/sass/sass/issues/193
Simple.
#import "path/to/file.css";

Resources