vue cli2 使用scss 全局变量

A 胡先生 ༽

于 2022-01-07 10:51:06 发布

阅读量437

点赞数

文章标签： vue.js scss sass

本文链接：https://blog.youkuaiyun.com/weixin_45572314/article/details/122359612

版权

本文介绍了如何在Vue CLI 2项目中利用sass-resources-loader加载并管理全局SCSS变量，包括安装插件、修改build文件及配置细节。

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

vue cli2 使用scss 全局变量

安装插件sass-resources-loader

npm install sass-resources-loader --save-dev

修改build/utils.js

  exports.cssLoaders = function(options) {
  //......
  function generateLoaders(loader, loaderOptions) {
  return {
    sass: generateLoaders("sass", {
      indentedSyntax: true
    }),
    // scss: generateLoaders('sass'),
    scss: generateLoaders("sass").concat({
      loader: "sass-resources-loader",
      options: {
        resources: path.resolve(__dirname, "../src/styles/variables.scss") //这里是单独建的存放变量的scss，我的是 scss
      }
    }),
    //......
  };
};