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

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

Myth丶恋晨 2024-04-08 13:28 147阅读 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），知道大概原因可能是项目错误加载了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"),
            },
          },
        ],
      },
    ],
  },
};