How to use sass-resources-loader with [email protected] to add global scss variables and mixins.
Add a comment |
3 Answers
As you can see in the docs, the easiest way is to use loaderOptions for the sass preprocessor. No need for any extra dependency:
module.exports = { css: { loaderOptions: { sass: { prependData: ` @import "@/scss/_variables.scss"; @import "@/scss/_mixins.scss"; ` } } } }; 
1 Comment
AldoRomo88
As @constant-meiring mentioned before, this is the right way solve this using vue-loader 15
[email protected] uses webpack-chain to manage its webpack config. To add sass-resources-loader to the predefined webpack config. Add the following to the vue.config.js
vue.config.js
const path = require('path') module.exports = { lintOnSave: false, chainWebpack: (config) => { config .module .rule('vue') .use('vue-loader') .tap((options) => { options.loaders.scss = options.loaders.scss.concat({ loader: 'sass-resources-loader', options: { resources: path.resolve('./src/scss/_variables.scss'), }, }) return options }) config .module .rule('scss') .use('sass-resources-loader') .loader('sass-resources-loader') .options({ resources: path.resolve('./src/scss/_variables.scss'), }) }, } Hope this helps!
2 Comments
farincz
in my case vue-loader options contains just {compilerOptions: { preserveWhitespace: false }} which leads to TypeError: Cannot read property 'scss' of undefined Any idea what is wrong?
Constant Meiring
This doesn't seem to work any longer with vue-loader 15.
css: { loaderOptions: { stylus: { loader: 'stylus-resources-loader', import: [path.resolve(__dirname, 'src/styles/imports.styl')] } } } 
1 Comment
mburesh
While this code may answer the question, providing additional context regarding why and/or how this code answers the question improves its long-term value.