vue-cli项目使用scss

原创于 2016-10-10 21:30:04 发布 · 置顶 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

Web常用专栏收录该内容

13 篇文章

订阅专栏

本文档介绍了一个移动端Vue项目的配置过程，重点讲解如何在项目中安装和配置node-sass、sass-loader和style-loader以支持SCSS。通过阅读和学习此项目，可以提升开发者对Vue和SCSS的应用能力。在配置文件webpack.base.config.js中，需要正确合并vue-loader的选项，以避免报错。确保SCSS加载器能够正确工作，例如在vue-loader的选项中添加对应的loaders配置。

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

介绍一个vue项目给大家学习，阅读别人的项目可以快速提高自己哦，移动端vue完整项目

安装node-sass+sass-loader+style-loader，进入webpack.base.config.js配置scss。

所以增加如下：

{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
'scss': 'style-loader!css-loader!sass-loader'
}
}
}

当然，如果需要在vue文件style标签使用scss的话，需要声明一下：

一定要注意的是，如果配置里已经有了vue-loader项，则需要合并在一起，否则将报错，如下

{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
}

有这个则两个合并在一起，你懂得，比如这样

{
        test: /\.vue$/,
        loader: 'vue-loader',
         options: {
          loaders: {
            'scss': 'style-loader!css-loader!sass-loader',
            'vueLoaderConfig':vueLoaderConfig
          }
        }
      },

注意：配置好，需要重启一下 npm run dev