css-loader import is not working properly

Question

I am using Webpack to create bundles for my react application. I am using postcss and css-loader to load CSS files. In my app, css import is not working properly. I am trying to import every thing in my Main.css file, but webpack throws error by saying:

./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

Here is the webpack configs to load CSS(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'
        }
      ]
    }

Here is the link to postcss config file

Directory structure of my app is:

• app/
  • js/
  • styles/
    • base/
      • _base.css
      • _reset.css
      • _variables.css
    • vendor/
      • _reset.css
    • main.css

Answer 1

Currently the postcss-loader does not support auto-resolving import statements with missing underscore characters. (See this github issue for further details: https://github.com/postcss/postcss-import/issues/145)

To address this, you can either change the import statement to:

@import "vendor/_reset";

Or check out the library postcss-easy-import - it supports resolving imports to include leading underscores.