0

I am trying to import css to my specific component of react app.

webpack config:

{
    test: /\.css$/,
    loader: ExtractTextPlugin.extract({
        use: 'css-loader',
    }),
}

but css is not applied.

I also included the main css inside index.html. Is it the reason why I cannot apply another css file?

<link rel="stylesheet" href="../style/style.css">

Can you suggest me what's missing?

2
  • Possible duplicate of stackoverflow.com/questions/53572200/… Dec 2, 2018 at 16:46
  • I think @sebinq might have answered your question as it relates to loading css specific to the component. If you don't care about it being specific to the component, my answer in that question should suffice. Dec 2, 2018 at 16:48

1 Answer 1

0

It depends on the webpack version you're using. For example, if you're using Webpack 4, then your development config would be:

{
  test: /\.s?css$/, // test for scss or css files 
  use: [
    'style-loader', // try to use style-loader or...
    {
      loader: 'css-loader', // try to use css-loader 
      options: {
        sourceMap: true, // allow source maps (allows css debugging)
        modules: true, // allow css module imports
        camelCase: true, // allow camel case imports
        localIdentName: '[local]___[hash:base64:5]', // set imported classNames with a original className and a hashed string in the DOM, for example: "exampleClassName__2fMQK"
      },
    },
  ],
}

example.css (must use camel case instead of snake case)

.exampleClassName {
   text-align: center;
}

example.js

import React from 'react';
import { exampleClassName } from './example.css';

export default () => (
  <h1 className={exampleClassName}>I am centered!</h1>
)

For production, you'll want to use OptimizeCSSAssetsPlugin and MiniCssExtractPlugin :

minimizer: [
  new OptimizeCSSAssetsPlugin({ 
    cssProcessorOptions: { 
      map: { 
        inline: false, 
        annotation: true 
      } 
    } 
  }),
],
{
  plugins: [
    new MiniCssExtractPlugin({
        filename: `css/[name].[contenthash:8].css`,
        chunkFilename: `[id].[contenthash:8].css`,
    }), 
  ]
}

When you run webpack to build your application for production, it'll compile the css and (when the webpack config is set up properly) will generate an index.html that automatically adds a link to the compiled stylesheet.

Webpack is a steep learning curve and there's a lot of missing options from the above examples, so if you're just trying to get it up and running, then I have a Webpack-React-Boilerplate that has (s)css modules imports and a lot more already configured for you. I've included notes within the webpack config files to help assist as to what each option is doing.

Otherwise, if you're trying to learn older versions of webpack, then you can eject the create-react-app and reverse engineer/look at their extensive webpack notes.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.