Skip to content

@imports not resolving when css-modules enabled #436

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
edwinwright opened this issue Mar 2, 2017 · 11 comments
Closed

@imports not resolving when css-modules enabled #436

edwinwright opened this issue Mar 2, 2017 · 11 comments
Assignees

Comments

@edwinwright
Copy link

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
Copy link
Member

@edwinwright Only for @imports using ~ ?

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

Thx in advance 🙃

@edwinwright
Copy link
Author

edwinwright commented Mar 7, 2017

@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(),
  ],
};
  1. App.css
@charset "utf-8";
@import "~normalize.css/normalize.css";

* {
  box-sizing: border-box;
}

@michael-ciniawsky
Copy link
Member

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
Copy link
Author

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

@LinuCC
Copy link

LinuCC commented Mar 30, 2017

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

@ghost
Copy link

ghost commented Jul 21, 2017

Any update on this?

@lhnrd
Copy link

lhnrd commented Oct 17, 2017

Any further improvement on this issue?

@alexander-akait
Copy link
Member

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

@lhnrd
Copy link

lhnrd commented Oct 18, 2017

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

@lnhrdt
Copy link

lnhrdt commented Oct 31, 2017

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';

lnhrdt added a commit to lnhrdt/coffee that referenced this issue Oct 31, 2017
@alexander-akait
Copy link
Member

Close in favor #589 (comment)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

6 participants