I'm currently using css-loader, node-sass, sass-loader and style-loader packages within webpack to compile my sass files, here is how my loader looks at the moment:
{
test: /\.scss$/,
loader: 'style!css!sass'
}
I want to use folder structure like this for my styles
styles
components/
main.sass
and somehow within main.sass I want to import everything from components folder so something like #import './components/**/*' is this possible via webpack?
You can prefix a Sass import with '~' to tell the Sass loader to use webpack's require() resolution on the import. Once webpack is in charge of the import you have some flexibility.
If you do a dynamic require, e.g. require('~./components/' + someVar + '.scss'), webpack can't evaluate the variable at build time and it bundles all the possible files in that directory, and the actual resolution of the require() happens at runtime (which can lead to errors at runtime if you've asked for something that doesn't exist). Not sure off the top of my head if that would give you what you need (all the files bundled) or if you would still need to explicitly require() each partial -- but if that's the case you could easily loop through all the files in the directory and require each one.
More on how you can leverage webpack's dynamic requires and loading context.
Related
Folder structure:
Error description:
Sass version:
ParcelJS solved my problem by being able to compile my Sass/Scss code into plain CSS but i don't want to use it in such a small project like this one.
OS: MX Linux.
Sass is able to compile my code just fine if i don't use #use or #import.
Try importing like below with a relative path:
#use ./abstracts/resets
Here is an overview of how Sass imports files:
Finding the File
It wouldn’t be any fun to write out absolute URLs for every stylesheet you import, so Sass’s algorithm for finding a file to import makes it a little easier. For starters, you don’t have to explicitly write out the extension of the file you want to import; #import "variables" will automatically load variables.scss, variables.sass, or variables.css.
⚠️ Heads up
To ensure that stylesheets work on every operating system, Sass imports files by URL, not by file path. This means you need to use forward slashes, not backslashes, even when you’re on Windows.
Load Paths
All Sass implementations allow users to provide load paths: paths on the filesystem that Sass will look in when resolving imports. For example, if you pass node_modules/susy/sass as a load path, you can use #import "susy" to load node_modules/susy/sass/susy.scss.
Imports will always be resolved relative to the current file first, though. Load paths will only be used if no relative file exists that matches the import. This ensures that you can’t accidentally mess up your relative imports when you add a new library.
💡 Fun fact:
Unlike some other languages, Sass doesn’t require that you use ./ for relative imports. Relative imports are always available.
I am using bootstrap-sass. The node module is installed. I should expect I can, in any .scss file, use the below line to import into an appropriate sheet
#import 'bootstrap';
My understanding is what should happen is the compiler crawls up until it finds package.json, hops into node_modules, and finds the appropriate package. Instead I am getting the below error.
Error: File to import not found or unreadable: bootstrap
If I replace my import with a fully qualified path as below, then everything works gravily.
#import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap';
I am using gulp-sass to compile. Guessing I just have some minor config bits off but I can't figure out what it is.
Pass the path as an includes path....
Eg. It will look something like this if you're using gulp
.pipe(sass({
includePaths: ['node_modules/bootstrap-sass/assets/stylesheets']
}))
Then you should be fine to use:
#import 'bootstrap';
It will not import stuff like Javascript / Node.js. It will look for the bootstrap file in the same folder as the file which imports it. So yes, you need to use the long path or place the bootstrap file in the same folder.
I want to override several scss files of bootstrap. The paths in my project are like this
Source code of my scss:
/src/client/sass/style.scss
Source code of bootstrap:
/bower_components/bootstrap-scss
Now if i edit the style.scss in Webstorm it cant find the import
#import "bootstrap"
Im using gulp so i created a gulp task, that generates css from default bootstrap and my additions so i dont use the WebStorm watches.
How can i configure the project, so that the #import are correctly linked to bower components? Currently im using a symlink, but it feels like a hack.
Just mark /bower_components/as Resource Root (Mark directory as/Resource root) - WebStorm will resolve imports relative to it
I am trying to do :
#if (debug)
.crazyClass {}
And I would like the debug variable to come from the console when I compile my sass, is this possible?
You can't inject variables into SASS or set variables via the command line. I really wish we could because it would simplify issues like this.
I know of only two ways of doing conditional compiles.
Use Different Entry Points
Use different SASS files as the entry points for compile. Your project might look something like this.
/www
/css
_styles.scss
dev.scss
prod.scss
The dev.scss file would set debug to true, and import _style.scss, but the prod.scss would set debug to false, and import _style.scss. Both produce the output CSS file but for different environments.
Use Different Import Paths
You can configure SASS to use different import paths and setup your project files like this.
/www
/css
/dev
_config.scss
/prod
_config.scss
styles.scss
The styles.scss would just do a #import "config" at the top, and depending on which path is set the corresponding _config.scss file would be imported.
So I made a library that I can bower install using a direct link. I can use this library from another internal application by adding the library name in the dependency of the bower.json file. When other internal application does a bower update, the changes I made on the library will be applied to their application. This part is working very well.
Now, I'd like the other software devs to have freedom to change the styles. They can create css file directly and that will work. However, it's a hackish route. I can provide them the same settings file that I use.
So i tried putting that file in the main section of the bower.json but wiredep is processing it. I put it in exclude and the error is gone when I run gulp.
"main": [
"dist/stylesheet.css",
"src/_settings.scss"
],
this is the code that prevented it from being parsed by wiredep
wiredep: {
directory: 'bower_components',
exclude: ['css/foundation.css','src/_settings.scss']
}
Am I right that I'll have to create a new gulp task and put 'src/_settings.scss' as gulp.src like this
gulp.task('sasstask2', function () {
return gulp.src('src/_settings.scss')
.pipe($.sass())
.pipe(gulp.dest('src/css'));
});
I also like the generate css to be injected to index.html but not sure how to do it? Will wiredep automatically inject it to index.html?