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.
Related
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
I'm working on a custom theme for my local WordPress site. I've set up a File Watcher in PhpStorm that compiles my scss files in myTheme/scss/ to myTheme/style.css.
This works as intended, the variables which I've declared in _variables.scss are able to be used in style.css or any file imported after it.
My problem now is that the #import '~foundation-sites/dist/css/foundation.min.css'; is being compiled as #import '~foundation-sites/dist/css/foundation.min.css'; instead of the actual css content.
I've tried using #import '../node_modules/foundation-sites/dist/css/foundation.min.css'; instead but this compiles the same way.
What am I doing wrong?
.css extension in import statement tells the compiler to generate plain CSS import instead of pulling the contents in; see https://github.com/sass/sass/issues/556#issuecomment-397771726 for reference.
I'd suggest changing your import to
#import '../node_modules/foundation-sites/dist/css/foundation' - this should help.
Note that ~ prefix is a webpack feature SASS compiler is not aware of. So, when using SASS in your file watcher, you have to either change paths to relative or pass --load-path node_modules/ to compiler
I ran into this issue and this solved it for me. Uncheck Track only root files, which is defaultly checked.
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 have this template - web template - editorial when I added it to my existing Meteor app it does not load the scss files, only the css file which is in the client directory. Though I put the scss files in the public folder. What best way can I add this? because I could not get it to work i decided to compile the scss to css.
sass_folder
scss_subfolder
----base_scss_subfoler
_partial1.scss
_partial2.scss
----components_scss_subfoler
_buttons.scss
_textbox.scss
----layouts_scss_subfoler
_pages.scss
_footer.scss
----libs_scss_subfoler
_functions
_vars
_skels
_mixins
main.scss
ie8.scss
ie9.scss
css_output_folder
I have tried to compile the files by doing thus on the cmd: sass --update scss:css it only compiled the main.scss, ie8.scss, ie9.scss to the css folder, other are not compiled. How do I compile all at once and maintain the same sub-directory folder in the css folder. Why and how do I do this?
If other files name start with _ character then these files are partials meaning they get no compiled and their content can only used with import.
Read the official doc about partials.
The files with names starting with underscore are considered as partials and not compiled to css files. That is why you are not seeing those in your output css.
Please navigate to section with heading 'Partials' in this document ... and read the next 2 sections.
You can create partial Sass files that contain little snippets of CSS that you can include in other Sass files. This is a great way to modularize your CSS and help keep things easier to maintain. A partial is simply a Sass file named with a leading underscore. You might name it something like _partial.scss. The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file. Sass partials are used with the #import directive.
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.