Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

not fetching css

オープン
  • 何か問題がありますか？
#255 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
3/5
見積もり時間
1〜2日
初心者へのやさしさ
25/100
issue の種類
バグ
明瞭さ
説明が足りない
活発さ
停滞
技術スタック
javascript, react, webpack
領域
frontend, tooling

調査の方向性

.babelrc と webpack.config.js の設定から始め、login.js の CSS インポートを login.css およびレポートに示された生成済みの出力と比較します。影響を受ける build を実行し、インポートされたスタイルシートが出力され、生成されたクラス名に適用されているかを確認します。login.css のスタイルが取得され、レンダリングされた 2 つの要素に適用されれば完了です。

索引モデルが issue の本文から書いたものです。

説明

question

I can see it generates the plugin specific class names on the selectors, but it does not fetch the styles from the css file.

My configuration:

.babelrc

"plugins": [
  "@babel/plugin-proposal-object-rest-spread", 
  "@babel/plugin-transform-react-jsx",
  ["@babel/plugin-transform-runtime", {
      "useESModules": false
    }],
  "@babel/plugin-proposal-class-properties",
  "@babel/plugin-syntax-dynamic-import",
  ["react-css-modules",{
    "handleMissingStyleName": "warn"
  }]
],

webpack.config.js

    module: {
    rules: [
        {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader: "babel-loader",
            }
        },
        {
            test: /\.css$/,
            use: [
                ExtractCssChunks.loader,
                "css-loader",
                {
                    loader: "postcss-loader",
                    options: {
                        ident: "postcss",
                        plugins: (loader) => [
                            require('postcss-import')(),
                            require('postcss-preset-env')(),
                            require('autoprefixer')(),
                            require('cssnano')()
                        ]
                    }
                }
            ]
        }
    ]
},
     plugins: [
    new HardSourceWebpackPlugin(),
    new CleanWebpackPlugin({
        cleanOnceBeforeBuildPatterns: ['/public/dist/*.*', '/public/img-cache/*.*']
    }),
    new ExtractCssChunks( // old new MiniCssExtractPlugin( note sideEffect config on package.json for production
        {
            filename: "[name].[contenthash].css",
            chunkFilename: "[id].css"
        }
    ),
    new HtmlWebpackPlugin({
        showErrors: true,
        template: 'templates/webpack.html.twig', // base template
        filename: '../../templates/base.html.twig', // output
        inlineSource: '.(css)$' // embed all css inline
    }),
    new HtmlWebpackInlineSourcePlugin(), 
    new ManifestPlugin(),
    new InjectManifest({
        swSrc: './client/sw-src.js',
        swDest: '../sw.js',
        exclude: [/\.twig$/, /\.DS*/],
    }),
],

login.css

 .login_action {
    width: 300px;
    margin: 0 auto;
 }

.not_member {
  margin: 20px 0;
}

login.js

 import './login.css';

 render () {
 ....
 return (
    ...
      <div styleName='login_action'>
            <div styleName='not_member'></div>
      </div>
    .....
  )
 }

An instance of the output from dev tools

class="client-pages-login-___login__login_action___1ACvE"
class="client-pages-login-___login__not_member___3A7Bt"
主要言語
JavaScript
スター
2k
フォーク
159
30日以内にマージされた PR はありません

環境構築

このプロジェクトの環境構築ファイルはまだ確認していません。まず README を読み、一般的な手順ははじめてのコントリビューションガイドを参照してください。

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

gajus/babel-plugin-react-css-modules のほかの issue

gajus/babel-plugin-react-css-modules の issue をすべて見る

似ている issue

JavaScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。