vue2 配置scss

时间：2020-05-21 12:00:33 阅读：69 评论：0 收藏：0 [点我收藏+]

1、安装文件

npm install --save-dev sass-loader

npm install --save-dev node-sass

2、配置 webpack.base.conf.js

找到webpack.base.conf.js文件的module模块下面的rules添加以下代码

1   module: {
2     rules: [
3       ...
4       {
5         test: /\.scss$/,
6         loaders: ["style", "css", "sass"]
7       },
8      ...

注意：这里loaders和文件中其他配置不同加了s

3、使用

1、在使用的地方如下写法

<style lang="scss" scoped>
  div {
    a {
      color: red
     }
    }
</style>

2、@import外部导入，如果不加scoped如果在app.vue中导入那么就是全局scss

<style lang="scss" scoped>
 @import ‘./assets/scss/global.scss‘;
 * {
  color: red
 }
</style>

这样写下面的覆盖外部引入的

报错

Module build failed: TypeError: this.getResolve is not a function

技术图片

原因主要是我们sass-loader的版本太高，导致webpack编译时出错。

解决：打开我们的package.json，修改sass-loader的版本为7.3.1

执行命令，重新安装项目依赖

$ npm install

然后，启动项目

$ npm run dev

项目启动成功，编译报错问题解决

原文地址：https://www.cnblogs.com/xujian2016/p/12929627.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

周排行