问题

今天本地的项目(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"),
            },
          },
        ],
      },
    ],
  },
};

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

以上内容权当记录。

参考链接:
https://juejin.cn/post/7085915259541667847

Logo

技术共进,成长同行——讯飞AI开发者社区

更多推荐