【问题记录】sass-loader无法识别/deep/语法导致打包出错

Myth丶恋晨 2024-04-08 13:28 86阅读 0赞

### 问题 ###

今天本地的项目（`angular` \+ `ionic`）打包，一直提示错误，报错信息如下：

ERROR in ./src/style/common.scss
    Module build failed (from ./node modules/_mini-css-extract-plugin@0.9.0@mini-css-extract-plugin/sass-loader/dist/cjs.js):
    ModuleBuildError: Module build failed(from .node_modules/_sass-loader@8.0.2@sass-loader/dist/cjs.js)
    SassError: expected selector.
    /deep/::.unit-wrap{
    ^

### 排查 ###

第一反应是项目里所依赖的`node-sass`版本被升级了，然而经过一番检查后发现，`node-sass`版本并没有升级。后来找到一篇大佬的文章（[https://juejin.cn/post/7085915259541667847][https_juejin.cn_post_7085915259541667847]），知道大概原因可能是项目错误加载了`sass`而不是`node-sass`。如果是这样，可以通过以下命令来确认是否是这个原因：  
node模式下运行

> require.resolve('sass') 
    'F:\\project\\app-dev\\dcs-sys\\node_modules\\_sass@2.16.3@sass\\sass.dart.js'

知道了原因之后，才想起前段时间在本地用`create-react-app`创建了一个项目，可能安装了全局的`sass`影响到了。

### 解决方案 ###

知道了原因之后，解决起来也比较简单，如果项目中采用了`webpackage`作为打包方案，可以在配置文件中指定`scss`语法的实现为`node-sass`

module.exports = {
        
      module: {
        
        rules: [
          {
        
            test: /.s[ac]ss$/i,
            use: [
              "style-loader",
              "css-loader",
              {
        
                loader: "sass-loader",
                options: {
        
                  implementation: require("node-sass"),
                },
              },
            ],
          },
        ],
      },
    };

另外如果是其他打包方案，比如本人项目中是`ionic`，并没有配置可以指定`scss`语法的实现，只能先死马当活马医，将`nodejs`卸载，并将全局`npm node_modules`目录删除，再重新安装nodejs，也能解决问题。

以上内容权当记录。

参考链接：  
[https://juejin.cn/post/7085915259541667847][https_juejin.cn_post_7085915259541667847]

[https_juejin.cn_post_7085915259541667847]: https://juejin.cn/post/7085915259541667847