vue scss 安装步骤

囍 . 囍

于 2022-07-12 14:34:56 发布

阅读量2.1k

点赞数 1

文章标签： vue.js scss 前端

本文链接：https://blog.youkuaiyun.com/weixin_39730483/article/details/125740245

版权

本文详细介绍了如何配置Webpack以支持SCSS文件的处理。首先，通过npm安装了`sass-loader`、`node-sass`和`style-loader`。接着，在`webpack.base.conf.js`中添加了针对SCSS的规则。最后，展示了在Vue组件中使用SCSS的语法，即在`<style>`标签中添加`lang=scss`属性。这使得开发者能够顺利地在项目中引入和使用SCSS样式。

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

1.安装依赖，安装最新版本，有的属性会不支持，防止报错安装指定版本

npm install sass-loader@7.3.1 --save-dev  //安装8.0
npm install node-sass@4.14.1 --save-dev
npm install style-loader --save-dev //安装style-loader 有些人安装的是 vue-style-loader 其实是一样的！

2.配置文件

在webpack.base.conf.js 文件下的配置 rules
rules:[
    ...
    { 
        //从这一段上面是默认的！不用改！下面是没有的需要你手动添加，相当于是编译识别scss!
        test: /\.scss?$/,
        loaders: ["style", "css", "sass"]
    }
]

3.使用方式，style标签增加lang="scss"