一,安装插件
npm i sass-resources-loader -D
二,修改wenpack的rule配置
//全局引入scss变量{test: /\.(css|scss|sass)$/,use: [!prodMode? 'style-loader': {loader: MiniCssExtractPlugin.loader,options: {publicPath: '../'}},'css-loader','postcss-loader','sass-loader',{loader: 'sass-resources-loader',options: {resources: ['src/style/_variables.scss' // 引入全局 SasS 变量的文件(对应你全局文件的路径)]}}]}
三,如果是vue-cli项目怎么办?
在vue.config.js中修改配置即可:
module.exports = {css: {loaderOptions: {scss: {prependData: `@import "@/style/tools/index.scss";@import "@/style/settings/var.scss";`// 引入全局 SasS 变量的文件(对应你全局文件的路径)},}}}