Import scss files to a current scss file --> Could not resolve styleName error

[brian-tran-dev]

Basically what I was doing is that I have a scss files name "_abc.scss" which is imported into "abcd.scss" and then I import "abcd.scss" to my "main.js" file. In my "main.js" I use a class that is defined in "_abc.scss" and it results in "could no resolve the styleName ...". Any ideas how to resolve this issue?

[hoangnm]

Have you installed postcss-scss and put a config like this in your babel plugins option ?

 ['react-css-modules', {
        filetypes: {
           '.scss': {
              syntax: 'postcss-scss'
           }
         }
      }
]

[X-Y]

Think I have the same issue. And yes I have the configs as described, in .babelrc

"plugins": [
    ["react-css-modules", {
      "generateScopedName": "[name]__[local]___[hash:base64:5]",
      "filetypes": {
        ".scss": {
          "syntax": "postcss-scss"
        }
      }
    }]
  ]

Without the filetype config, it would be a different error: Cannot use styleName attribute for style name 'container' without importing at least one stylesheet.

[brian-tran-dev]

Have you installed postcss-scss and put a config like this in your babel plugins option ?

 ['react-css-modules', {
        filetypes: {
           '.scss': {
              syntax: 'postcss-scss'
           }
         }
      }
]

Yes, my config file is exactly like that. I had to remove that to finish my assignment in school so I dont have my config file right now but my config file was the same as it in webpack.config.js.

[gajus]

I had to remove that to finish my assignment in school so I dont have my config file right now but my config file was the same as it in webpack.config.js.

Is there a school course that teaches to use babel-plugin-react-css-modules?

[brian-tran-dev]

I had to remove that to finish my assignment in school so I dont have my config file right now but my config file was the same as it in webpack.config.js.

Is there a school course that teaches to use babel-plugin-react-css-modules?

No, they just said you can do whatever you want with front-end we dont care so I use react loll.

[darrencrossley]

I also have the same problem - specifically, I have a sass mixin I call from the imported stylesheet which has child classes i.e.

mixins.sass:

@mixin header
    border-radius: 3px
    .title
        font-size: 14px

in my component.sass file I have:

@import 'styles/mixins.sass'

.headerThing
    @include header

This produces the error cannot resolve the styleName title as it's not directly specified in component.sass.

If I change this to be:

.headerThing
    @include header
    .title
        display: block

Then the error is removed and the compile succeeds. The title div gets both the font-size attributes and display styles so it seems this is only a pre-compile issue.

I can even then remove the above code and the compile will continue to succeed - so it seems the check is only done at certain times - however, restarting Webpack will always cause the error to return so this isn't in any way a workaround.

Adding such additional classes as a workaround is also pretty annoying as they're not required styles and this must be done for all styleNames in each place a mixin is used - which mitigates most of the benefits of using a mixin.

[hinok]

You have to install https://github.com/longlho/postcss-import-sync2 and import it as the first plugin like below (configuring babel-plugin-react-css-modules).

Maybe newer postcss-import would also work here but it doesn't have sync mode and postcss-import-sync2 is also used in README.md

---

Edit: async plugins are not supported, postcss-import-sync2 must be used.

Custom resolve function is required if you'd like to support importing sass partials _my-partial.scss like @import './my-partial';.

const path = require('path');

// Later configuring plugin...
{
  filetypes: {
    ".scss": {
      syntax: "postcss-scss",
      plugins: [
        [
          "postcss-import-sync2",
          {
            resolve: function(id, basedir, importOptions) {
              let nextId = id;

              if (id.substr(0, 2) === "./") {
                nextId = id.replace("./", "");
              }

              if (nextId[0] !== "_") {
                nextId = `_${nextId}`;
              }

              if (nextId.indexOf(".scss") === -1) {
                nextId = `${nextId}.scss`;
              }

              return path.resolve(basedir, nextId);
            }
          }
        ],
        [
          "postcss-nested",
          {
            bubble: ["@include"],
            preserveEmpty: true
          }
        ]
      ]
    }
  },
  generateScopedName: "[path]___[name]__[local]___[hash:base64:5]",
  webpackHotModuleReloading: true,
  exclude: "node_modules",
  handleMissingStyleName: "warn"
}

It's working in my case for styles.scss that look like

styles.scss

@import './base';

.foo {
  color: red;
}

_base.scss

.base {
  color: blue;
}

I hope it will help someone. If someone would like to have a working demo, I can push it on github.

[jkhaui]

@hinok I can't get this to work properly with .scss and it's driving me crazy, could you please post your demo to GitHub?

[hinok]

@jkhaui Look at demo folder https://github.com/hinok/babel-plugin-react-css-modules/tree/feature/scss-partials/demo

Commit: https://github.com/hinok/babel-plugin-react-css-modules/commit/0bf3624778d3eaeca816e0f4983953ab47bd706b

I upgraded also webpack, loaders and all other dev dependencies to the newest versions in demo/.

[jkhaui]

@hinok amazing, thank you so much! Exactly what I was looking for :)

[rovadi]

Hey in my case the only way to solve the issue without adding any extra css was to add two comments:

.classname
    // stylename ignore - start line
    +mixin
    // stylename ignore - end line

Hope it helps.

[Stephane-Ag]

In my case, it seems to have been because the plugin expects some things to be in alphabetical order. My code was like this:

.container {
  font-family: Avenir;
  margin-top: -1rem;
  padding-top: 1rem;
  position: relative;

  &.setHeight {
    height: 39.375rem;
  }

  &.adaptive {
    min-height: 35.9rem;
  }
}

and error that it couldn't find adaptive.

Changing it to this fixed it:

.container {
  font-family: Avenir;
  margin-top: -1rem;
  padding-top: 1rem;
  position: relative;

  &.adaptive {
    min-height: 35.9rem;
  }

  &.setHeight {
    height: 39.375rem;
  }
}

After it was fixed, if I attempted to replicate it, the issue would not occur anymore...

[shayanpaul]

@hinok This implementation is not working as its throwing error as postcss 8 required by postcss-import-sync2