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

Webpack 1.14 and Sass-loader

Abierto
#67 0 comentarios 1 reacción 0 asignados Ver en GitHub
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

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.