I'm trying to import a CSS stylesheet into a .sass file from a component. In this example, the component is bootstrap-select and the import looks like this:
#import 'bootstrap-select/bootstrap-select.css'
This builds successfully but the browser is unable to find the file, I receive the following error in the browser:
GET http://localhost:9000/styles/bootstrap-select/bootstrap-select.css 404 (Not Found)
Is there anything special I need to setup to have .css files included in builds?
In order to import the code of the file into your Sass file the imported file needs to have a .sass or .scss ending. If the file ends with .css the code will not be sucked in and it just is a normal CSS #import statement that creates an HTTP request.
Just copy the css file you want to import, change the file ending to .scss and #import that file. Sass will then suck in the code and replace the #import statement with it in your CSS file.
What Kahlil said; but I would propose using bootstrap-sass instead as it gives you a lot more flexibility when it comes to what you can/can't include. I'm using this in production and it's very good; you can completely tailor your build, including variables so that you can tweak the button colours, spacing and such. For example:
/*
|---------------------------------------------------------------------
| Only include the parts of Bootstrap that we are actually using.
|---------------------------------------------------------------------
*/
$navbar-margin-bottom: 0;
#import "../vendor/bootstrap-sass/lib/variables";
#import "../vendor/bootstrap-sass/lib/mixins";
#import "../vendor/bootstrap-sass/lib/normalize";
#import "../vendor/bootstrap-sass/lib/print";
#import "../vendor/bootstrap-sass/lib/scaffolding";
#import "../vendor/bootstrap-sass/lib/type";
// etc
Add it to your bower.json (bootstrap-sass) and use that instead.
There's a ruby gem which allows for the functionality described called sass-css-importer, which allows for the following syntax to be used to include files ending with .css from within .scss files:
#import "CSS:../../bower_components/alertify/themes/alertify.core";
#import "CSS:../../bower_components/alertify/themes/alertify.default";
#import "CSS:../../bower_components/normalize-css/normalize";
#import "../../../bower_components/bourbon/app/assets/stylesheets/_bourbon";
#import "../../../bower_components/neat/app/assets/stylesheets/_neat";
It can be added to a Gemfile like so:
source "http://rubygems.org"
gem "sass-css-importer"
And required in the Gruntfile:
sass:
options:
quiet: true
require: 'sass-css-importer'
static:
files: [
expand: true
cwd: 'source/styles'
src: ['*.scss']
dest: 'build/styles'
ext:
YMMV. Good luck!
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');
I'm learning sass, and using the live sass compiler extension in vs code. I'm also using the live server extension to view it in the browser. I have a main scss file which compiles fine every time I save the file and shows the updated code in the live browser. However, when I modify the partial files (_vaiables.scss for example), the browser reloads with no css, just the html; then, I need to re-save main.scss so I can see those changes in _variables.scss. Is that how it usually works? It is kind of annoying having to save two different files to see changes on the screen. I'm pretty sure there is a better way.
Here is my main.scss
#import "abstracts/functions";
#import "abstracts/mixins";
#import "abstracts/variables";
#import "base/animations";
#import "base/base";
#import "base/typography";
#import "base/utilities";
#import "components/button";
#import "components/composition";
#import "components/feature-box";
#import "components/card";
#import "layout/header";
#import "layout/grid";
#import "pages/home"
Here is some of the settings.json file for live sass compiler extension.
"liveSassCompile.settings.formats": [
{
"format": "compressed",
"extensionName": ".css",
"savePath": "/advanced-css-course/Natours/starter/css/sass-compiler"
}
],
Here is the link to css in html
<head>
<link rel="stylesheet" href="css/sass-compiler/main.css" />
</head>
Thanks in advance.
I ended up installing node-sass to compile the code
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
We are using the BundleTransformer in our ASP.NET MVC project to bundle our style files.
This works great, but we noticed that some CSS files are not bundled with our LESS files when we important them in LESS with the #import CSS at-rule.
Sample in our root LESS file:
/* Import core LESS files */
#import "../core.less";
/* Import jQuery UI stuff*/
#import "../themes/base/core.css";
#import "../themes/base/resizable.css";
#import "../themes/base/accordion.css";
#import "../themes/base/tabs.css";
/* Import more LESS files */
#import "../morestyles.less";
If we look at the files that are downloaded from Chrome, it is clear that the CSS files are not bundled with the root LESS files.
Naturally, we could simply include these CSS files in the BundleConfig and remove the #import calls, but I was just curious to see if there is a way to have them bundled together.
You should read http://lesscss.org/features/#import-options.
In your code #import "../themes/base/tabs.css"; compiles into #import "../themes/base/tabs.css"; (due to the .css extension). Which is a "normal" CSS import, CSS imports require an additional HTTP request to load.
You can use the inline option:
#import (inline) "../themes/base/tabs.css";
The above inlines the code from tabs.css into your project file without processing it.
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);