Question? Can I disable css-loader's cssmodules rewriting rules for @import statements?

[pixeldrew]

For example, I have a css library installed via npm and would like to include it into my core styles but it looks like the webpack module css-loader is rewriting all the rules.

I want to keep the cssmodules rewriting for other css files included from the view layer but for the core styles i'd like to have the rules not renamed.

I don't see any settings in css-loader. Does anyone know a webpack module option trick to do this?

[xquezme]

In your:

./src/styles/core.scss

Try this

:global {
  @import './../../node_modules/YOUR_LIB';
}

[pixeldrew]

Hi Sergey,

I did try that, the library imports but the rules are still rewritten.

:global {
    @import 'npm-module/css/aframe-work.css';
}

[bezidejni]

Doesn't seem to work for me either, I'm using v1.0.0

[neverfox]

I just change my webpack config to treat css files outside of src as global CSS. This should probably be the default way the kit is set up as there are several scenarios where third-party libraries require you to use global CSS even though you use modules for your own components. I'm not a fan of the current either/or setup. I'll probably make a PR for this.

[dvdzkwsk]

I believe @neverfox 's latest PR (which has been merged) fixes this. Please let me know if it doesn't and I will reopen.

[pixeldrew]

This is still happening in master.

[pixeldrew]

I can't include a module into core.scss without it being rewritten, am I supposed to include it somewhere else? I tried putting it into config/_base.js into compiler_vendor but that didn't work.

[pixeldrew]

Apologies for the back and forth on this ticket, yes this is still happening.

[neverfox]

@pixeldrew Just so I understand, you're just having a problem importing a third-party CSS library into core? Are you still trying to wrap in in :global (which shouldn't be necessary)?

[pixeldrew]

even not wrapping it in global this still doesn't work:

I forked master (added an otf font fix on my branch):

git clone https://github.com/pixeldrew/react-redux-starter-kit
cd react-redux-starter-kit/
npm install
npm install --save topcoat
echo "@import 'topcoat/css/topcoat-desktop-light.css';" >> src/styles/core.scss 
export NODE_ENV='production' && npm run compile

The output is as follows (note that the topcoat file goes through the css-loader with localIdentName=...)

 chunk    {0} extract-text-webpack-plugin-output-filename 149 kB [rendered]
        [0] ./~/css-loader?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./~/sass-loader!./src/styles/core.scss 6.47 kB {0} [built]
        [1] ./~/css-loader/lib/css-base.js 1.51 kB {0} [built]
        [2] ./~/css-loader?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./~/topcoat/css/topcoat-desktop-light.css 137 kB {0} [built]
        [3] ./~/topcoat/font/SourceSansPro-Light.otf 95 bytes {0} [built]
        [4] ./~/topcoat/font/SourceSansPro-Regular.otf 97 bytes {0} [built]
        [5] ./~/topcoat/font/SourceSansPro-Semibold.otf 98 bytes {0} [built]
        [6] ./~/topcoat/img/hamburger_dark.svg 89 bytes {0} [built]
        [7] ./~/topcoat/img/search.svg 1.58 kB {0} [built]
        [8] ./~/topcoat/img/search_dark.svg 1.76 kB {0} [built]

[neverfox]

Oh yeah, styles is in source. I'll need to either update the regex or you could move non-module styles outside of src.

[pixeldrew]

if I move non-module styles outside of src how do I include them into the build?

[neverfox]

That's why I wouldn't recommend it. I'l work on a fix for this.

[jayzehngebot]

Any updates on this?

Trying to bring in an external component and import its' stylesheet. Not using a pre-processor and needing to keep the component's css global on both server and client. Don't want to move the component's dist css into our local project. Thanks for working on this.

[neverfox]

Thanks for the reminder. Will try in the next day or so. Is this something that's in node_modules? If so, one thing that comes to mind is added node_modules to the folder exclusions for the loader that processes css.

[pixeldrew]

@neverfox I added exclude /node_modules/ to the scss test but the css loader doesn't honor it. If it did, I imagine it'd be pointless since then it wouldn't import the file.

What is surprising me is that :global is not working.

[mauron85]

Same problem here. Tried to import css from node_modules with and without :global and rules were rewritten. webpack.config.js exclusion doesn't seems to work properly.

[pixeldrew]

I think this might be more an issue with cssloader than with the starter kit.