Css-loader: Import error with modules mode, composes and sass

[cliffrowley]

I have a project in which I have a Card and CardContainer component. The idea is that the Card can be used in isolation if desired, or multiple cards can be used inside a CardContainer which will arrange its cards in a grid and provide scrolling if necessary. In order to facilitate this, the container's CSS needs to modify the flex attributes of its children (adding flex 1 1 auto for example).

I'm using sass (via sass-loader) and each of my component sass files imports a utils.scss a couple of directories down, which works fine without composes, but with it I am getting a file not found on the utils.scss from the file being imported for composition.

This is my directory structure:

src/
  components/
    Card.jsx
    Card.scss
    CardContainer.jsx
    CardContainer.scss
    ...
  sass/
    _utils.scss
    ...

My (simplified) Card.scss looks like this:

@import '../sass/utils';

.card {
  ...
}

My (again simplified) CardContainer.scss looks like this:

@import '../sass/utils';

.card {
    composes: card from './Card.scss';
}

.cardContainer {
  & > .card {
    ...
    margin: 0 $gutter $gutter 0;
    flex: 1 1 auto;
    width: 30%;
  }
}

The error I see is:

Module not found: Error: Cannot resolve 'file' or 'directory' ../sass/utils in <path to project>/src/components

I don't fully understand how this all fits together but It seems to me that this mechanism is trying to resolve a js/jsx file rather than going through the sass pipeline. Does this make sense to you? It's resolving ./Card.scss just fine - it's the secondary import that doesn't seem to be working.

[mrlaessig]

Have similar issue with stylus. It seems to be that the stylus loader from the configuration file is not getting called. In my case transforming the styl file within the compose helped.

composes: formInput from 'stylus!./elements.styl'

In your case you have to call the sass loader instead of stylus.

[cliffrowley]

Oh, that's a great idea for a workaround - I hadn't even considered that - thanks! Obviously this is still a bug (or lack of feature?) somewhere along the line but this will certainly help move things along for me and my project very nicely!

[cliffrowley]

@l-urence your workaround worked for sass too, fyi - thank you so much :+1:

[bkonkle]

I'm having this same problem using _css-loader?modules_ along with _sass-loader_ and _resolve-url-loader_. I'm having to write my composes lines like this: composes: crumb from 'sass?sourceMaps&indentedSyntax=true!../../typography/breadcrumbs/crumb/styles.sass'

[tranan89]

@bkonkle We have the same issue and don't want to write lines like that either. I saw that u where working on a fix for it, how is it going?

[bkonkle]

Unfortunately, I haven't made much progress. I'm not familiar with PostCSS, and that is what css-loader uses to enable the composes functionality. I'm going to have to learn PostCSS first and then come back to this, but honestly I'll probably just end up using PostCSS directly.

[geekyme]

@l-urence doesn't seem to work for me on stylus:

.icon
    composes: black from 'stylus!../common.styl'
    width: 20px
    display: block
    margin: auto

common.styl:

.black
    color: black
    opacity: 0.4

My webpack config:

{
        test: /\.styl$/,
        loader: 'style!css?modules&sourceMap&localIdentName=[name]--[local]--[hash:base64:5]!stylus'
    },

When I console.log styles object, I get this:

{ convo_icon: "TestComp--icon--1-_Nl undefined"} }

[mrlaessig]

@geekyme I have to admit I'm not into this right now (haven't used it for quite a while). Maybe there is someone else to help out?

[geekyme]

any ideas @sokra ?

[mccambridge]

I'm having a similar issue with Sass. Anything new here?

[Pines-Cheng]

I have the same problem ... who has the solution？

[bkonkle]

I just discovered something last night that I'm not sure how I ever missed: https://github.com/webpack/css-loader#importing-and-chained-loaders

In my case, importLoaders was set to "1", but it needed to be set to "2" so that the sass-loader is picked up by Webpack on @-imports. This fully resolved my issue with using sass and css-modules together.

[JounQin]

I'm using CssModules with css-loader, postcss-loader, stylus-loader, it throws an error:

Uncaught (in promise) TypeError: Cannot read property 'modal' of undefined

I've tried to change the importLoaders to be "2", but this error still occurs.

My total loader config string is:

style-loader!css-loader?-minimize&modules&camelCase&importLoaders=2&localIdentName=[name]__[local]___[hash:base64:5]&sourceMap!postcss-loader?sourceMap!stylus-loader?sourceMap

I looked through the compiled style code:

exports.locals = {
    "prompt": "prompt-modal__prompt___ySAyV " + __webpack_require__(699).locals["modal"] + "",
    "prompt": "prompt-modal__prompt___ySAyV " + __webpack_require__(699).locals["modal"] + "",
    "btn-prompt": "prompt-modal__btn-prompt___2k-dR",
    "btnPrompt": "prompt-modal__btn-prompt___2k-dR",
    "prompt-text": "prompt-modal__prompt-text___gQ1v5",
    "promptText": "prompt-modal__prompt-text___gQ1v5"
};

__webpack_require__(699) is an array as following:

[michael-ciniawsky]

Please try with the latest stylus-loader, sass-loader, if there are still regressions I will reopen 😛

[delijah]

@michael-ciniawsky This is still not working.

[A-Tokyo]

michael-ciniawsky Is there any update on this? 💪