vue中安装sass，cli3配置全局sass/scss变量

最新推荐文章于 2025-06-24 14:24:29 发布

原创最新推荐文章于 2025-06-24 14:24:29 发布 · 2.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#cli3配置全局sass/scss变量 #vue 安装sass

VUE 同时被 2 个专栏收录

37 篇文章

订阅专栏

前端

18 篇文章

订阅专栏

本文详细介绍如何在Vue项目中集成Sass，包括所需安装包、解决编译错误的方法及全局变量配置。从安装node-sass、sass-loader到style-loader，再到cli2与cli3的配置调整，以及在Vue文件中使用Sass语法编写样式。

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

安装了sass需要的安装包！

npm install node-sass --save
npm install sass-loader --save
//sass-loader的版本过高导致的编译错误npm install sass-loader@7.3.1 --save
npm install style-loader --save

或者

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

cli2 sass全局变量还得需要一个包

npm install sass-resources-loader --save

然后在build>util.js中修改

scss: generateLoaders('sass')

修改成:

scss: generateLoaders('sass').concat(
  {
    loader: 'sass-resources-loader',
    options: {
        resources: path.resolve(__dirname, '../src/assets/global.scss')     //这里引入创建好的.cscc（里面定义变量）
    }
  }
)

cli3 在vue.config.js里面进行配置

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "@/assets/scss/style.scss";`
      }
    }
  }
}

最后我在vue文件的style里面就可以这么写就好了

<style scoped lang="scss">
#add {
  width: 100px;
  height: 100px;
  background: $bg;
 }
</style>