css-loader 导入无法正常工作答案

【问题标题】：css-loader import is not working properlycss-loader 导入无法正常工作
【发布时间】：2018-02-14 01:54:24
【问题描述】：

我正在使用 Webpack 为我的 react 应用程序创建包。我正在使用 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 的 webpack 配置（full config link）：

{
    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

【问题讨论】：

标签： webpack postcss css-loader

【解决方案1】：

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

要解决这个问题，您可以将导入语句更改为：

@import "vendor/_reset";

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

【讨论】：