When i compile my sass file with the plugin live sass compiler, like this is my .scss file
#import "./node_modules/bootstrap/scss/bootstrap.scss";
and then after the compile it creates two files one .css and other .css.map, in the .css file it just show me this in comment bars:
/* No CSS *//*# sourceMappingURL=styles.css.map */
i'm trying to compile this to use bootstrap in my project
Related
I have some .less files in a folder of my project.
I use PHPStorm, and it can automatically compile the .less files in CSS format.
Because I have to import some of these .less files into the main less file, I don't want them to be compiled as a single CSS file; instead, I just want the main.less file that I imported the other .less files into it, to compile in a CSS file so I can add it to a page.
For instance in SCSS, for this purpose we add an underscore at the beginning of the file name; then that SCSS file won't compile again.
I tried to use this way in LESS, too but it didn't work.
This is my step
npm install bootstrap-select
edit resource/assets/bootstrap.js and add "require('bootstrap-select');"
npm run prod
My Questions:
but lib bootstrap-select include sass or css files, how do I combine sass or css files in css/app.css ?
Is it only way that edit webpack.mix.js? or I can edit some file like "resource/assets/bootstrap.js"
You probably want to include the bootstrap-select sass files within your own sass.
Something like that in your resources/assets/sass/app.scss:
...
#import '~bootstrap-select/sass/bootstrap-select';
....
That way you can use their variables within your own sass files. And it will automatically be compiled into your public/css/app.css.
Or if you don't want to use the variables, you could just import the css from your sass file and still have it compile into app.css:
#import '~bootstrap-select/dist/css/bootstrap-select';
I'm using SASS and Netbeans for web development. Is it possible to create the default and minified CSS file at once?
Example: I've one SASS file like style.scss and want as fast as possible two compiled files named style.css and style.min.css
What can I do in Netbeans to get both files at once when I save or precompile my SASS file? Is there any solution or does it need every time a manual step to add compress on the command line, etc.?
Thanks!
I have set Grunt to run Compass which works nicely but I need stylesheets from my Bower components to be added to this.
What I have done is used the grunt contrib copy plugin to copy any .css files from my Bower components and place them in a temporary folder somewhere. I now need the Compass task to compile my sass and add the css from the files in the temporary directory to the end result.
Any ideas on how this could be accomplished?
One way to achieve this would be by changing your Bower component stylesheets to being SASS partials. Like from, lets say,
"bower1.css" - "bower2.css" - "bower3.css"
to
"_bower1.scss" - "_bower2.scss" - "_bower3.scss"
and then just add these Partials to your SASS file by adding imports:
/* Add regular Styles here... */
#import '/my/temporary/directory/bower1';
#import '/my/temporary/directory/bower2';
#import '/my/temporary/directory/bower3';
Then just compile your SASS file. Now everything should be right there in your compiled CSS file.
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.