Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

not fetching css

Abierto
  • ¿Algo no está bien?
#255 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
25/100
Tipo de issue
Error
Claridad
Necesita aclaración
Estado de actividad
Estancado
Stack tecnológico
javascript, react, webpack
Área
frontend, tooling

Línea de trabajo

Comienza con la configuración de .babelrc y webpack.config.js; después, compara la importación de CSS en login.js con login.css y con la salida generada que se muestra en el informe. Ejecuta el build afectado e inspecciona si la hoja de estilos importada se emite y se aplica a los nombres de clase generados. Se considera terminado cuando los estilos de login.css se obtienen y se aplican a los dos elementos renderizados.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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"
Lenguaje dominante
JavaScript
Estrellas
2k
Forks
159
Sin PR fusionados en 30 d

Preparar el entorno

Aún no hemos revisado los archivos de configuración de este proyecto. Empieza por su README y consulta nuestra guía para la primera contribución para los pasos generales.

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de gajus/babel-plugin-react-css-modules

Todos los issues de gajus/babel-plugin-react-css-modules

Issues similares

Más issues de JavaScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.