Trying to build custom workflow with gulp, panini, mustache, sass and one of my problem is including partials from node_modules, here is example from main.scss file:
#import "node_modules/bootstrap/scss/mixins";
#import "settings";
How to avoid typing full path to _mixins.scss?
Your question is similar to this: Sass import not crawling node_modules to find appropriate package
You can include paths by passing the includePaths argument to gulp sass. e.g
.pipe($.sass({
includePaths: ['node_modules/bootstrap/scss/', 'another/path']
})
You can include node_modules in sass pathes:
.pipe(sass({
includePaths: ['node_modules']
})
Then you can import library's sass like this:
#import "bootstrap/scss/bootstrap";
Or, in case of material-components-web:
#import "#material/top-app-bar/mdc-top-app-bar";
This way:
you don't need to add each lib to path
the sub-dependencies imports will work seamlessly, e.g. mdc-top-app-bar in MDC example imports "#material/elevation/mixins".
Use includePaths or you could resolve NPM modules like this:
#import "~bootstrap/scss/mixins";
#import "settings";
There are some libraries for this sass-globbing, but I personally don't like this approach, because in CSS matters on import order.
Best practice is IMHO create some file vendor.scss;
#import "~bootstrap/scss/mixins";
#import "~bourbon/...";
and then import this vendor.scss:
#import "vendor.scss"
#import "partials/..."
For anyone else that stumbles here, if you're using gulp-ruby-sass instead of node-sass you would use
loadPath: ['node_modules/bootstrap/scss/']
instead of
includePaths: ['node_modules/bootstrap/scss/']
Related
I have a file named main.scs that imported a general.scss file that has at the first line this :
#import "compass/css3";
As you can see I imported compass/css3 to use some predefined mixins.
Of course all of them are in a larvel project. larvel have a built-in Mix library to compile scss and other type files.
Also I wrote these to webpack.mix.js file :
let mix = require('laravel-mix');
mix.sass('resources/assets/sass/main.scss', 'public/main/css');
But when running npm run production command I got this error:
error in ./resources/assets/sass/main.scss
Module build failed:
#import "compass/css3";
^
File to import not found or unreadable: compass/css3.
Parent style sheet: D:/wamp/www/loverspay/resources/assets/sass/_general.scss
in D:\wamp\www\loverspay\resources\assets\sass\_general.scss (line 1, column 1)
Even I installed compass in the project directory But there is still that problem
What do I do?
If you have compass library installed inside node_modules directory you can try to import it like this:
#import "~compass/css3";
If it's doesn't help you can try to modify sass includePaths config variable (laravel mix has a third option to pass additional config):
mix.sass('resources/assets/sass/main.scss', 'public/main/css', {
includePaths: [path.resolve(__dirname, './relative/path/to/compass')]
});
I am new to gulp plugins and am trying to get sourcemaps to work
file structure
css/
sass/
theme/
_some-style.scss
_some-style-2.scss
_some-style-3.scss
style.scss
style.css
style.css.map
In my style.scss file I have
#import "theme/some-style";
#import "theme/some-style-2";
#import "theme/some-style-3";
great so I am only getting, _some-style-3.scss to appear in my dev tools when I inspect. I know I have a path issue here but not sure how to fix it.
Gulp file:
gulp.task('sass', function () {
return gulp.src(css/sass/theme/**/*.scss)
.pipe(sourcemaps.init())
.pipe(sass.sync().on('error', sass.logError))
.pipe(sourcemaps.write())
.pipe(gulp.dest(css));
});
Your input is a bit confusing as you have different paths in your file structure, your import statements, and your gulp file. I'll base my answer on the path you provided in the file structure.
Your file structure says "theme" is directly under "sass", so your #import statement should be #import "theme/_various-scss-file.scss"
You need to specify the scss file in gulp.src not just the path, for example gulp.src('css/sass/style.scss'). And output path, according to your file structure and assume your gulp file is in the same folder as the css folder, should be gulp.dest('css').
Figured it out. Unrelated to paths. I didn't include that I was also compressing my scss first and that is interfering with the sourcemapping
I am loading my utilities and assets in base.scss like so
#import "_variables";
#import "_mixins";
...
I have tons of modules in my application and we are doing so many changes in these modules.
so importing the base.scss in the header of each of the scss files is causing so much trouble and seems very redundant.
I tried using sass's includePaths but it didn't help as it only resolves the #import declarations.
Is there any way that I can auto import my utilities without having to #import it manually in each file?
This loader will do the job
https://github.com/shakacode/sass-resources-loader
by adding this to your webpack config
sassResources: [ './path/to/vars.scss', './path/to/mixins.scss' ]
Update
check the implementation out in action in this boilerplate
In Webpack 5, this is how I did it:
{
loader: 'sass-loader',
options: {
sourceMap: true,
additionalData: `#import "${__dirname}/src/int/css/_mixins.scss";`
},
Simply add the path to your e.g. SCSS Mixin or variable file to "additionalData".
I want to use Bootstrap with SASS, but I can't find any tutorials or explanation how one can use Bootstrap with SASS. The only thing I find is installatio trough a ruby gem:
compass create my-new-project -r bootstrap-sass --using bootstrap
Which creates the following tree in my folder:
Is this enough for Bootstrap to use its own Grid, because I don't see the bootstrap.scss file, neither any Grid related files. However, I find the grid classes and all in a styles.css file. Isn't there a bootstrap.scss file that has all the mixins and everything else? And where can I find a more extended use of SASS's Bootstrap mixins, which are described here briefly:
http://www.hongkiat.com/blog/bootstrap-and-sass/
Thank You all in advance! I really can't find nothing on my problem.
(I'm using .sass files in my answer, but it should apply to .scss files, too)
Isn't there a bootstrap.scss file that has all the mixins and everything else?
Yes, there is. Here's the generated styles.sass file:
// Import Bootstrap Compass integration
#import "bootstrap-compass"
// Import custom Bootstrap variables
#import "bootstrap-variables"
// Import Bootstrap for Sass
#import "bootstrap"
bootstap_variables refers to the generated _bootstrap-variables.sass file in your project tree, whereas bootstrap-compass and bootstrap are imported from the gem's stylesheets directory.
The latter imports all other Bootstrap files, including the grid:
// Core variables and mixins
#import "bootstrap/variables";
#import "bootstrap/mixins";
// Reset and dependencies
#import "bootstrap/normalize";
#import "bootstrap/print";
#import "bootstrap/glyphicons";
// Core CSS
#import "bootstrap/scaffolding";
#import "bootstrap/type";
#import "bootstrap/code";
#import "bootstrap/grid"; # <-- here it is
...
I have _header.scss, _footer.scss and _main.scss and I want to combine them all into one and generate style.css.
I know it has to do with file watchers, but I haven't been able to figure out how to combine multiple files into one.
Create file styles.scss that contain this code
#import 'header';
#import 'main';
#import 'footer';
It's not a PHPStorm feature, it's a SASS feature.
In style.scss it should start out with:
#import "_header";
#import "_footer";
#import "_main";
PHPStorm doesn't have to combine the files, Scss does.
#SlawaEremkin above is correct.
Be sure that the import file is named without an underscore (not a SASS partial) otherwise there won't be an output CSS file.
Correct
styles.scss
Incorrect
_styles.scss