vue-cli项目引入全局scss变量的方法

原创已于 2023-02-20 11:17:34 修改 · 397 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2023-02-20 11:14:56 首次发布

文章介绍了如何在基于vue-cli构建的项目中引入全局scss变量。首先需要通过npm安装sass-resources-loader，然后在vue.config.js文件中添加配置，利用chainWebpack方法和sass-resourceloader将指定的scss文件（如variables.scss）作为全局资源引入。

vue-cli引入全局scss

- 引入依赖
- 修改配置文件

vue-cli创建的项目没有webpack的配置文件，例如没有bulid/util.js，需要在/vue.config.js中配置

引入依赖

npm install sass-resources-loader --save

修改配置文件

// vue.config.js

// ...其他的代码
function addSassResource(rule) {
  rule
    .use("sass-resource")
    .loader("sass-resources-loader")
    .options({
      resources: path.resolve(__dirname, "./src/styles/variables.scss") // 需要全局导入的scss
    });
}
module.exports = {
	// ...其他的代码
    chainWebpack(config) {
	    // 引入全局scss
	    const types = ["vue-modules", "vue", "normal-modules", "normal"];
	    types.forEach((type) =>
	        addSassResource(config.module.rule("scss").oneOf(type))
	    );
	    // ...其他的代码
	}
}