gajus / gajus/babel-plugin-react-css-modules
Webpack 1.14 and Sass-loader
- 主要言語
- JavaScript
- スター
- 2k
- フォーク
- 159
- PR マージ指標
- 30日以内にマージされた PR はありません
説明
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?
コントリビューションガイド
このリポジトリのコントリビューションガイドは索引されていません
調査の方向性
package.json とレポートに示されている webpack のルールから始め、webpack 1.x、sass-loader 4.0.0、および記載されている CSS Modules の設定で構成を再現します。生成されたスタイルによってプレフィックス付きのコンポーネントクラスが生成されない理由を追跡します。互換性の問題を特定し、具体的な解決策を文書化または検証できれば完了です。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- javascript, react, sass
- 領域
- build-system, frontend
- issue の種類
- バグ
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 活発さ
- 停滞
- 明瞭さ
- 説明が足りない
- 初心者へのやさしさ
- 25/100