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

馋馋猫

已于 2023-02-20 11:17:34 修改

阅读量383

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

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

本文链接：https://blog.youkuaiyun.com/ccccm__/article/details/129120625

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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))
	    );
	    // ...其他的代码
	}
}