gajus / gajus/babel-plugin-react-css-modules
Webpack 1.14 and Sass-loader
- Lenguaje dominante
- JavaScript
- Estrellas
- 2k
- Forks
- 159
- Métricas de merge de PR
- Sin PR fusionados en 30 d
Descripción
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?
Guía de contribución
No hay ninguna guía de contribución indexada para este repositorio
Línea de trabajo
Comienza con package.json y las reglas de webpack mostradas en el informe; después, reproduce la configuración con webpack 1.x, sass-loader 4.0.0 y los ajustes de CSS Modules indicados. Rastrea por qué los estilos generados no producen clases de componente con prefijo; se considera terminado cuando se haya identificado el problema de compatibilidad y se haya documentado o validado una resolución concreta.
Escrito por el modelo de indexación a partir del texto del issue.
Evaluación
- Stack tecnológico
- javascript, react, sass
- Área
- build-system, frontend
- Tipo de issue
- Error
- Dificultad
- 4/5
- Tiempo estimado
- 3-5 días
- Estado de actividad
- Estancado
- Claridad
- Necesita aclaración
- Aptitud para principiantes
- 25/100