gajus / gajus/babel-plugin-react-css-modules

Webpack 1.14 and Sass-loader

Open
#67 0 comments 1 reaction 0 assignees View on GitHub
Dominant language
JavaScript
Stars
2k
Forks
159
PR merge metrics
No merged PRs in 30d

Description

Is webpack 1.x and sass-loader supported? This is my configuration,

```
// Process JS with Babel.
{
test: /\.(js|jsx)$/,
include: paths.appSrc,
loader: 'babel',
query: {

// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables caching results in ./node_modules/.cache/babel-loader/
// directory for faster rebuilds.
cacheDirectory: true,
plugins: [
'transform-react-jsx',
[
'react-css-modules',
{
"generateScopedName": "MYCOMP___[local]",
"filetypes": {
".scss": "postcss-scss"
}
}
]
]
}
},
{
test: /\.scss$/,
include: path.resolve(__dirname, './stylesheets/sass'),
loaders: [
'style-loader?{"sourceMap":true,"attrs":{"id":"mycomp-style-tag"}}',
'css-loader?modules=true&importLoaders=1&localIdentName=MYCOMP___[local]',
'sass-loader?modules=true&importLoaders=1&localIdentName=MYCOMP___[local]',
'autoprefixer-loader'
]
},
```

and this is what package.json contains,

```

"devDependencies": {
"autoprefixer": "6.7.2",
"node-sass": "^3.8.0",
"sass-loader": "^4.0.0",
...
"postcss-loader": "1.2.2",
"postcss-scss": "^0.4.1",
...
```

Without sass-loader, my CSS and everything works fine. As I've tried to switch to use sass, I can see the CSS itself getting generated. But "styleName" is never defined.

That is, there is a ... styles tag in HEAD, but in the react component, all the elements don't get the right prefix.

What would you suggest doing?

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.