CODEWITHSUNDEEP
javascripthtmlcssreactjswebpack
Chirag
Chirag

Reputation: 73

Add style to bundled code using webpack

GitHub: https://github.com/Chirag161198/react-boilerplate 1

Here is the react boilerplate I’m trying to make from scratch. I have bundled html with the react code but I’m not able to add styles (CSS). I have heard about ExtractTextPlugin but not able to configure it. Please suggest some way to add styles to it.

Thank you in advance.

Upvotes: 5

Views: 5127

Answers (3)

Ufuk
Ufuk

Reputation: 81

first you need to load style-loader and css-loader.Then you will add the following code in "rules" in webpack.config.js file.

{ test: /\.css$/,use: ['style-loader', 'css-loader']}

then import the "style.css" file location into the "index.js" file and for example:

import "./style.css";

When you package, "css" codes will be added in "bundle.js".

Upvotes: 0

Sakhi Mansoor
Sakhi Mansoor

Reputation: 8122

Hi Chirag ExtractTextPlugin works great but when it comes to caching and bundle hashing. Css bundle becomes 0 bytes. So they introduced MiniCssExtractPlugin which has tackled this issue. It is really important to cache static files as your app size increase by time. import plugin first:

var MiniCssExtractPlugin = require("mini-css-extract-plugin");

add these in your webpack config:

rules: [

   {
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader'
      }
    },
    {
      test: /\.scss$/,
      use:  [  'style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
    }
  ]
}
plugins: [
  new MiniCssExtractPlugin({
    filename: 'style.css',
  }),
  new HtmlWebpackPlugin({
    template: './src/index.html',
  }),

Let me know you the issue still persists.

Upvotes: 0

Joshua
Joshua

Reputation: 3186

You need to use style-loader and css-loader in your webpack.config.js

First, install these two packages via npm: npm install style-loader, css-loader --dev

Then, create a styles.css in your src folder and append the following styles into the file (just for demo purpose, so you know it's working correctly):

body {
  background-color: #ff4444;
}

Don't forget to import the css file in your src/index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App.js';
import './styles.css'; // <- import the css file here, so webpack will handle it when bundling

ReactDOM.render(<App />, document.getElementById('app'));

And use style-loader and css-loader in your webpack.config.js:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: { loader: 'babel-loader' },
      },

      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },

  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
  ],
};

If you don't see the correct output, you might need to restart the webpack dev server again. I have cloned your repo and made the changes like I mentioned above, it works.

As for ExtractTextPlugin, you will need this when bundling for a production build, you can learn more from their Repo

Hope it helps!

Upvotes: 4

Related Questions