0

Being a newbie to Webpack, I'm following the discussion: Recomended way to require CSS in webpack by:

  1. Configuring my Webpack configurations with { test: /(\.css|\.scss)$/, loaders: ['style-loader', 'css-loader?sourceMap', 'postcss-loader', 'sass-loader?sourceMap'], },

  2. Requiring css files in my code: require('./style1.css'); require('./style2.css');

But the two css files above will not be bundled together. How to instruct Webpack to bundle all required css files?

anhldbk
  • 4,559
  • 5
  • 29
  • 37
  • Define "not be bundled together". If you want the CSS to be a separate file instead of included in JS, use `ExtractTextPlugin`. – Tatsuyuki Ishi Apr 23 '17 at 04:59
  • @TatsuyukiIshi: Well, I mean all required css files must be magically combined into one big css file when being served by Webpack. Is it capable? – anhldbk Apr 23 '17 at 07:17
  • See http://stackoverflow.com/a/31462849 – Tatsuyuki Ishi Apr 23 '17 at 07:34
  • @TatsuyukiIshi: Thank you so much! You've made my day. – anhldbk Apr 23 '17 at 08:18
  • Possible duplicate of [Getting css output using webpack ExtractTextPlugin](http://stackoverflow.com/questions/29730321/getting-css-output-using-webpack-extracttextplugin) – anhldbk Apr 23 '17 at 08:19

2 Answers2

3

By default webpack will not bundle your css, it will create inline style tag in HTML and place your css there. For extract all your css and bundle into one css file you nee extract text plugin

for webpack 2

npm install --save-dev extract-text-webpack-plugin

for webpack 1

npm install --save-dev extract-text-webpack-plugin@1.0.1

In webpack 2

const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("styles.css"),
  ]
}

Webpack 1

var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
    module: {
        loaders: [
            { test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") }
        ]
    },
    plugins: [
        new ExtractTextPlugin("styles.css")
    ]
}

Read more https://github.com/webpack-contrib/extract-text-webpack-plugin

Jorawar Singh
  • 7,463
  • 4
  • 26
  • 39
0

As I saw in your Webpack configuration entires, you are instructing Webpack to bundle your css files inject then as inline css by using css-loader and style-loader.The css-loader takes a CSS file and reads off all its dependencies whilst the style-loader will embed those styles directly into the markup as tag in the of the document.

Personally, just to keep things clean, I’d prefer to have a separate CSS file rather than adding all the code inline. To do that we’ll need to use a Webpack plugin called extract-text-webpack-plugin which moves every require('style.css') in entry chunks into a separate css output file. We have to install that with npm:

for webpack 2

npm install --save-dev extract-text-webpack-plugin

for webpack 1

npm install --save-dev extract-text-webpack-plugin@1.0.1

Now we can update our webpack.config.js file again by requiring it and placing our CSS loader into it:

var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: './src',
output: {
    path: 'build',
    filename: 'bundle.js',
},
module: {
    loaders: [
        {
            test: /\.js/,
            loader: 'babel',
            include: __dirname + '/src',
        },
        {
            test: /\.css/,
            loader: ExtractTextPlugin.extract("css")
        }
    ],
},
plugins: [
    new ExtractTextPlugin("styles.css")
]
};

it then creates a styles.css file for us! We can now add this stylesheet file in the 

<link rel="stylesheet" href="build/styles.css">
arvindsc
  • 147
  • 5