vue2使用scss，并且全局引入公共scss样式变量

最新推荐文章于 2025-10-10 09:37:34 发布

原创最新推荐文章于 2025-10-10 09:37:34 发布 · 2.9k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#scss #前端 #javascript

文章讲述了如何在Vue项目中安装和配置node-sass、sass-loader、style-loader和sass-resources-loader。通过npm安装这些依赖后，在vue.config.js中配置sass-resources-loader，设置公共scss文件路径，以便全局使用变量。此外，还提及了devServer的代理配置以及在组件内部如何使用定义的样式变量。

安装node-sass、sass-loader、style-loader、sass-resources-loader

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

配置sass-resources-loader入口文件

在vue.config.js中

const {
  defineConfig
} = require('@vue/cli-service');

module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    proxy: { //代理配置
      //...
  },
  chainWebpack: config => {
    // sass-resources-loader 公共样式文件配置，可全局使用变量
    const oneOfsMap = config.module.rule('scss').oneOfs.store
    oneOfsMap.forEach(item => {
      item
        .use('sass-resources-loader')
        .loader('sass-resources-loader')
        .options({
          // 写入定义基础样式的scss文件路径
          resources: [
            './src/assets/styles/common.scss',
            
          ]
        })
        .end()
    })
  },

});

在assets下新建style文件，并新建common.scss样式文件。

//./src/assets/styles/common.scss ----公共样式文件

$price-color:#8B0000;

组件内使用：

style标签添加 lang="scss"

//组件内使用
<style lang="scss" scoped>

//样式变量使用
.price {
  color: $price-color;
}
</style>