【菜鸟搭建react项目之路11】【scss】关于引入scss的步骤与问题解决

写过scss和css的都知道，scss可以嵌套样式选择器，感觉更符合写代码的逻辑和思维。所以我也是更愿意在项目里引用scss的。下面简单介绍下引入的步骤和引入踩的坑。

引入步骤

---

1、安装node-sass、sass-loader

npm i node-sass@4 sass-loader@10 -d

 

2、在webpack.config.js文件中引入sass-loader

{
  test: /\.(css|scss)$/,     // 增加对scss文件的处理
  exclude: /node_modules/,   // 不对node_modules目录下的文件进行处理
  use: [
    // css-loader和style-loader，对css后缀的文件进行处理
    // style-loader必须在css-loader前面
    { loader: "style-loader" },
    { loader: "css-loader" },
    { loader: "sass-loader" },  // 引入sass-loader，处理scss文件
  ],
},

 

3、在js文件中引入scss文件

import "../../css/semantic.scss";

 

引入scss踩坑记

---

1、报错：Module build failed (from ./node_modules/style-loader/dist/cjs.js):TypeError: this.getOptions is not a function

原因：一般这种错误，首先就可以去查查包之间的冲突，果然我的style-loader@3.3.1太高了，不适合webpack4 。换成style-loader@2.+

解决：

npm i style-loader@2 -d

 

 2、报错：ERROR in ./css/semantic.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./css/semantic.scss)

原因：版本不兼容

解决：合适的版本如下

css-loader@5 和 webpack@4

sass-loader@10 和 node-sass@4以及webpack@4

 

3、！！！那怎么知道自己装的包合不合适，有没有冲突，应该对应哪些版本的包呢？

1. 去github官网（https://github.com/），搜索包名（style-loader）
   
2. 找到包后，点击进入查看
   
   
   
3. 根据tag来筛选版本代码
   
   
   
4. 点击package.json文件，查看依赖的包版本