@imports not resolving when css-modules enabled

[edwinwright]

I'm trying to import normalize.css from the node_modules directory. When I have the default configuration it works as expected.

@import "~normalize.css/normalize.css";

When I enable css-modules I get a webpack compilation error:

Module not found: Error: Can't resolve '~normalize.css/normalize.css'

Is this expected behaviour or a bug?

I'm using:

• css-loader: 0.26.2
• webpack: 2.2.1

[michael-ciniawsky]

@edwinwright Only for @imports using ~ ?

1. webpack.config.js
2. Component which imports CSS (Modules)

Thx in advance 🙃

[edwinwright]

@michael-ciniawsky Yes, since I logged this, I found that it does work without the ~ prefix.

It is confusing though. I wouldn't have thought that enabling the module would change the behaviour like this.

1. webpack.config.js

const { resolve } = require('path');
const webpack = require('webpack');

module.exports = {
  context: resolve(__dirname, './src'),
  entry: {
    app: [
      'babel-polyfill',
      'react-hot-loader/patch',
      'webpack-hot-middleware/client',
      './index.js',
    ],
  },
  output: {
    filename: '[name].bundle.js',
    path: resolve(__dirname, './dist'),
    publicPath: '/',
  },
  devtool: 'inline-source-map',
  module: {
    rules: [
      {
        test: /\.js$/,
        use: ['babel-loader'],
        exclude: [/node_modules/],
      },
      {
        test: /\.s?css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true,
              localIdentName: '[local]--[hash:base64:5]',
            },
          },
          'sass-loader',
        ],
      },
    ],
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(),
  ],
};

2. App.css

@charset "utf-8";
@import "~normalize.css/normalize.css";

* {
  box-sizing: border-box;
}

[michael-ciniawsky]

It is confusing though. I wouldn't have thought that enabling the module would change the behaviour like this.

Yeah :D, we need to take a serious look at the resolver, it should work like you expected 😛

@charset "utf-8";

Is this line mandatory for you atm, bc #355 and regardless of that does @charset work for you ?

[edwinwright]

@charset is not mandatory for me at the moment, but I haven't noticed any problems with it so far.

[LinuCC]

@edwinwright @michael-ciniawsky isnt this a result of the request-behaviour used in modules?
The README says the following:

url() URLs in block scoped (:local .abc) rules behave like requests in modules:

• ./file.png instead of file.png
• module/file.png instead of ~module/file.png

I had the same issue, it seems kinda counterintuitive:

:global { * { background: url('~assets/my-asset.svg'); } } // works

:local { * { background: url('~assets/my-asset.svg'); } } // does not work

:local { * { background: url('assets/my-asset.svg'); } } // no tilde here but works

That is odd behaviour.

Because of this resolving the actual URL is context-sensitive making global variables ala bootstrap-sass (e.g. $styleguilde-asset-url / $bootstrap-font-url) awkward to use.

Any update on this?

[lhnrd]

Any further improvement on this issue?

[alexander-akait]

@lcsrinaldi please provide minimum reproducible test repo, thank you!

[lhnrd]

@evilebottnawi sorry, I don't know how to provide you with that. Isn't the issue already specified by other comments?

[lnhrdt]

Hello @michael-ciniawsky @evilebottnawi! @jantimon produced a testable repo in #589. I see that evilebottnawi commented there but the conversation stalled. Can you take another look?

I can confirm it's still an issue on the latest 0.28.7.

It affects other syntaxes than just the one jantimon demonstrated in his repo. For example, the following also break when modules are enabled:

// App.js

import '~normalize.css';

/* App.css */

@import '~normalize.css';