vue使用sass

武当王也拜见老天师

已于 2023-02-08 11:31:27 修改

阅读量228

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js sass

于 2023-02-08 11:28:51 首次发布

本文链接：https://blog.youkuaiyun.com/Oct_Somnus/article/details/128932407

vue 专栏收录该内容

15 篇文章

订阅专栏

在安装webpack的依赖时，需注意不要使用最高版本的sass-loader和node-sass，推荐使用7.3.1和4.14.1版本。配置webpack时，在webpack.base.conf.js的module.rules中添加处理SCSS文件的规则。然后在代码中可以正常使用SCSS语法，如设置.hello类内h1和h2的样式。

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

一、安装依赖

webpack解析loader 注意版本别使用最高，会报错的，7.3.1可用，直接指定版本。

npm i -D sass-loader@7.3.1

sass-loader依赖于node-sass，同样指定版本。

npm i -D node-sass@4.14.1

二、配置webpack

在根目录build文件夹下的webpack.base.conf.js的module.rules里面添加配置     
      {
        test: /\.scss$/,
        loaders: ['style','css','sass'],
      },

三、使用方法

<style lang="scss" scoped>
  .hello {
    h1, h2 {
      font-weight: normal;
      color: red;
    }
  }
</style>