I using scss in my project to import scss files.
For example I have file with variables (that using everywhere in my project)
And I have desktop.scss for importing files into it
Like this
#import 'variables';
#import 'desktop/_style';
#import 'desktop/index';
#import 'desktop/step_1';
#import 'desktop/step_2';
#import 'desktop/step_3';
#import 'desktop/step_4';
According to this issue
Link
It will be deprecated.
But what I can use instead of it?
Any suggestions?
This issue is only about importing CSS into a SCSS file. From your code I assume, that you only use SCSS Files, so you won't have a problem with that in future.
Related
I am trying to Minify the following
#import url('https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,700,700i,900');
#import 'plugin/bootstrap.css';
#import 'pages/reset.css';
#import 'pages/common.css';
#import 'pages/animations.css';
#import 'pages/form.css';
to
#import url(https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,700,700i,900);#import url(plugin/bootstrap.css);#import url(pages/reset.css);#import url(pages/common.css);#import url(pages/animations.css);#import url(pages/form.css);
But for some reason when I run: npm run prod. The minified file that I get back only contains the first import statement for google fonts as given below and for some reason, other import statements are omitted from the output:
#import url(https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,700,700i,900);
I have written the following in the webpack.mix.js file to achieve this:
mix.styles('public/assets/css/global.css', 'public/assets/css/global.css');
When I use CSS Minifier (https://cssminifier.com/) I get the intended output, but I want to do that locally using Laravel mix.
Your Webpack line imports and exports from the same location. Maybe try:
mix.styles('resources/sass/global.css', 'public/css');
styles.scss
#import 'packages/bulma.sass';
bulma.sass
#charset "utf-8"
/*! bulma.io v0.6.1 | MIT License | github.com/jgthms/bulma */
#import "sass/utilities/_all"
#import "sass/base/_all"
#import "sass/elements/_all"
#import "sass/components/_all"
#import "sass/grid/_all"
#import "sass/layout/_all"
terminal
'Error: client/packages/bulma.sass.scss doesn\'t exist!
Is it possible to import SASS into a SCSS file? What is the best way to install bulma into a scss env.
I also tried #import 'packages/bulma' and get client/packages/bulma.scss doesn\'t exist!.
tl;dr can you try removing the .sass extension?
#import 'packages/bulma';
More detailed answer from this post:
The Sass #import directive extends the CSS #import rule so that it works with .scss and .sass files. It imports the file referenced and any variables or mixins that are defined in the imported file so they can be used in the main file.
#import "typography.scss";
Assuming there’s a file typography.scss in the current directory, the contents of typography.scss will replace the #import statement.
Sass makes it even simpler. If you forget to include the extension, it will look for a file with the same name and either a .scss or .sass extension.
#import "typography";
The statement above would find either typography.scss or typography.sass in the same directory as the file importing the typography styles.
#Hector is right, just wanted to add some other things.
What is valid is covered by the language docs https://sass-lang.com/documentation/file.SASS_REFERENCE.html#import so the double import might be a node-sass bug, but the extension behaviour is going to warn in the next version of Sass AFAIK. Libsass runs through a sass2scss library to transpile the "unsupported" old .sass to .scss.
Remove the leading _ from the imports, those aren't valid
use #import "../node_modules/bulma/bulma.sass"; instead of #import 'packages/bulma.sass';
It will not throw any error. For more information, you can go through this link
I'm using rails 5.1.4, bourbon 3.2.3 and neat 1.8.0 gems, sass-rails: 5.0.7, bootstrap-sass: 3.3.7 in gemfile. I have one page specific file and one custom.css file. I have my page specific file setup like this:
#import "bootstrap-sprockets";
#import "bootstrap";
#import "normalize";
#import "bourbon";
#import "neat";
#import "base/grid-settings";
#import "base/variables";
#import "base/forms";
#import "base/global";
#import "layout/header";
#import "layout/footer";
I have defined all my variables in the _variables.scss file. However, I am getting error:
ActionView::Template::Error (Undefined variable: "$base-line-
height".). undefined variable, #include box-sizing, undefined $primary-color.
I can't use any of the variables I have defined in my variable.css.scss file. It seems like sass, bourbon and neat are not correctly importing into the files. I'm not sure what I'm doing wrong. I have seen similar questions and answers like the one I have but none worked for me. I need help here - thank you
When I import partial files on style.scss. It's working fine. All variables working fine.
style.scss
#import 'base/variable';
//Component
#import 'component/menubar';
#import 'component/menubar-mascot';
#import 'component/menubar-count';
#import 'component/menubar-button';
But when I try to merge menubar scss partial files, like this
style.scss
#import 'base/variable';
//Component
#import 'component/menubar';
menubar.scss
#import 'menubar-mascot';
#import 'menubar-count';
#import 'menubar-button';
The variable on variable.scss it cannot readable, but when I import again the variable.scss on menubar.scss, like this
menubar.scss
#import '../base/variable';
#import 'menubar-mascot';
#import 'menubar-count';
#import 'menubar-button';
it's working fine, why? and how to fix this without import again the variables.scss on menubar.scss?
I assume menubar-mascot is located where you ran the sass command.
For some reason absolute path in nested imports doesn't seem to be found.
#import 'menubar-mascot';
#import 'menubar-count';
#import 'menubar-button';
However if you use a relative one it does find it. So relative to your bundle scss file you can do:
#import '../menubar-mascot';
#import '../menubar-count';
#import '../menubar-button';
Thus it will go back from component folder back to the root and find the correct files.
Is it possible to prevent SASS from merging files included via #import?
For development, i would like to maintain the references of the original CSS (in my setup compiled from SASS already).
The docs for the #import rule says that:
All imported SCSS and Sass files will be merged together into a single CSS output file.
And explain that there is some 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.
The following rules will tell SASS to merge imported files:
#import "foo.scss";
#import "foo";
The following rules will tell SASS to NOT merge imported files:
#import "foo.css";
#import "foo" screen;
#import "http://foo.com/bar";
#import url(foo);