Question

为SCSS加载程序提供以下配置：

  return {
    test: /\.scss$/,
    use: [
      { loader: "lit-scss-loader", options: { minify: !isDev } },
      { loader: "extract-loader" },
      { loader: "css-loader", options: { sourceMap: isDev, importLoaders: 2 } },
      { loader: "sass-loader", options: { sourceMap: isDev } },
      {
        loader: "alias-resolve-loader",
        options: {
          alias: {
            "@css": pCss,
            "@img": pImg
          }
        }
      }
    }

（lit-scss-loader是一个特殊的加载器，它将已编译的CSS作为LitElement Web组件中的可构造样式表应用），所有功能均与具有明确定义的样式的scss文件完全一样。

但是，当它试图捆绑需要从其他地方导入样式的scss文件时，就会出现问题。我需要从NPM包中提取样式模块，例如@import "@momentum-ui/core/css/components/button.css";，这样做时会出现错误：

ERROR in ./src/components/button/styles/button.scss
Module build failed (from ./node_modules/extract-loader/lib/extractLoader.js):
/Users/kehyde/Desktop/agentx-base-components/node_modules/resolve/lib/sync.js:83
    throw err;
    ^

Error: Cannot find module './@momentum-ui/core/css/components/button.css' from '/Users/kehyde/Desktop/agentx-base-components/src/components/button/styles'
    at Function.resolveSync [as sync] (/Users/kehyde/Desktop/agentx-base-components/node_modules/resolve/lib/sync.js:81:15)
    at /Users/kehyde/Desktop/agentx-base-components/node_modules/extract-loader/lib/extractLoader.js:115:60
    at require (/Users/kehyde/Desktop/agentx-base-components/node_modules/extract-loader/lib/extractLoader.js:110:86)
    at /Users/kehyde/Desktop/agentx-base-components/src/components/button/styles/button.scss:3:41
    at Script.runInContext (vm.js:131:20)
    at Script.runInNewContext (vm.js:137:17)
    at /Users/kehyde/Desktop/agentx-base-components/node_modules/extract-loader/lib/extractLoader.js:147:20
    at Generator.next (<anonymous>)
    at step (/Users/kehyde/Desktop/agentx-base-components/node_modules/babel-runtime/helpers/asyncToGenerator.js:17:30)
    at /Users/kehyde/Desktop/agentx-base-components/node_modules/babel-runtime/helpers/asyncToGenerator.js:35:14
    at new Promise (<anonymous>)
    at new F (/Users/kehyde/Desktop/agentx-base-components/node_modules/babel-runtime/node_modules/core-js/library/modules/_export.js:36:28)
    at /Users/kehyde/Desktop/agentx-base-components/node_modules/babel-runtime/helpers/asyncToGenerator.js:14:12
    at evalModule (/Users/kehyde/Desktop/agentx-base-components/node_modules/extract-loader/lib/extractLoader.js:165:63)
    at evalDependencyGraph (/Users/kehyde/Desktop/agentx-base-components/node_modules/extract-loader/lib/extractLoader.js:167:12)
    at Object.<anonymous> (/Users/kehyde/Desktop/agentx-base-components/node_modules/extract-loader/lib/extractLoader.js:32:31)
 @ ./src/components/button/Button.ts 13:0-41 105:16-21
 @ ./src/index.ts
 @ ./src/[sandbox]/sandbox.ts

我没有运气就搜寻发行板。配置Extract-loader的publicPath选项似乎对该错误没有影响。我很沮丧有什么想法吗？

Webpack Extract Loader无法解析SCSS模块路径

0 个答案: