Question

我正在使用Webpack为我的反应应用程序创建包。我正在使用postcss和css-loader来加载CSS文件。在我的应用程序中，css导入无法正常工作。我试图导入Main.css文件中的所有内容，但是webpack通过说：

引发错误

./node_modules/css-loader?{"importLoaders":1,"modules":true,"minimize":{"calc":true,"colormin":true,"core":true,"discardDuplicates":true,"discardOverridden":true,"mergeLonghand":true,"minifyFontValues":true,"minifyParams":true,"normalizeCharset":true,"orderedValues":true,"reduceDisplayValues":true,"styleCache":true,"uniqueSelectors":true,"convertValues":true,"discardComments":true,"discardEmpty":true,"discardUnused":true,"filterPlugins":true,"mergeIdents":true,"mergeRules":true,"minifySelectors":true,"normalizeString":true,"normalizeUrl":true,"reduceBackgroundRepeat":true,"reduceTransforms":true},"sourceMap":true,"camelCase":true,"localIdentName":"[path][name]---[local]---[hash : base64 : 5]"}!./node_modules/postcss-loader/lib!./app/styles/main.css
    Module build failed: Error: Failed to find 'vendor/reset'
        in [ 
            /Users/bharat/Documents/redmart-repo/Partner-Portal-V2/app/styles
        ]
        at /Users/bharat/Documents/redmart-repo/Partner-Portal-V2/node_modules/postcss-import/lib/resolve-id.js:48:11
     @ ./app/styles/main.css 4:14-133 18:2-22:4 19:20-139
     @ multi (webpack)-dev-server/client?http://localhost:8081 webpack/hot/dev-server ./app/styles/main.css

这是加载CSS（full config link）的webpack配置：

{
    test    : /\.css$/,
    exclude : /node_modules/,
    include : `${PATHS.styles}/`,
    use     : [
        {
          'loader' : 'style-loader'
        },
        {
          'loader'  : 'css-loader',
          options   : {
            importLoaders  : 1,
            modules        : true,
            minimize       : cssNanoConfigs,
            sourceMap      : !isProd,
            camelCase      : true,
            localIdentName : '[path][name]---[local]---[hash : base64 : 5]'
          }
        },
        {
          loader : 'postcss-loader'
        }
      ]
    }

这是link to postcss config file

我的应用程序的目录结构是：

应用程序/
- JS /
- 样式/
  - 碱/
    - _base.css
    - _reset.css
    - _variables.css
  - 供应商/
    - _reset.css
  - 的main.css

Answer 1

目前postcss-loader不支持缺少下划线字符的自动解析导入语句。（有关详细信息，请参阅此github问题：https://github.com/postcss/postcss-import/issues/145）

要解决此问题，您可以将import语句更改为：

@import "vendor/_reset";

或者查看库postcss-easy-import - 它支持解析导入以包含前导下划线。

css-loader导入无法正常工作

1 个答案: