VUE-CLI配置全局SCSS变量

陈小白_weilin2024-09-21 11:02

一.引入`node-sass`和`sass-loader`依赖

javascript 复制代码

npm install --save-dev sass-loader node-sass

二. 在项目根目录中创建一个`scss`变量文件，比如`constant.scss`：

三.在`vue.config.js`文件中引入这个变量文件：

javascript 复制代码

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "@/utils/css/constant.scss";`
      }
    }
  }
};

四.版本错误的配置

sass-loader版本问题引发的错误：options has an unknown property 'prependData'. These properties are valid

当前版本如下:

复制代码

"sass": "^1.32.7",
"sass-loader": "^12.0.0",

原来的写法：

javascript 复制代码

css: {
    loaderOptions: {
      sass: {
        prependData: '@import "@/utils/css/constant.scss";'
      }
    }
}

修改后（生效）：

javascript 复制代码

module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
  css: {
    loaderOptions: {
      
      sass: {
        additionalData: '@import "@/utils/css/constant.scss";'
      }
    },
  }
})

多个文件全局配置

javascript 复制代码

css: {
    loaderOptions: {
      scss: {
        additionalData: `
        @import "@/style/utils/_variables.scss";
        @import "@/style/utils/mixin.scss";
        `
      }
    }
}

VUE-CLI配置全局SCSS变量

一.引入node-sass和sass-loader依赖

二. 在项目根目录中创建一个scss变量文件，比如constant.scss：

三.在vue.config.js文件中引入这个变量文件：

四.版本错误的配置

一.引入`node-sass`和`sass-loader`依赖

二. 在项目根目录中创建一个`scss`变量文件，比如`constant.scss`：

三.在`vue.config.js`文件中引入这个变量文件：