Webpack css setup and best practise

Question

I am new to webpack and would like to use it with reactjs but kind of lost confused right now. I would like to know how css is handled in the client site development process with webpack. I know that webpack bundles all my js and links it as bundle.js which I reference in my html file like this:<script src="http://localhost:3000/assets/bundle.js"></script> based on my configuration of webpack-dev-server. Now, I do have also a css file. Where does this go? what would be my url to reference this in my html file. I understand that there is a style-loader and a css-loader and also an ExtractTextPlugin, but where does the output belong? I saw that I can var css = require('path/customStyle.css') but dos not seems to see where it appears? I do this in my index.jsx file. So the question his: How to get this together, that I can reference my customStyle.css. What do I do wrong, or what do I miss Here is my project folder structure:

|_source
|   |_js
|       |_js
|       |    |_components
|       |      |_ *.jsx
|       |_index.jsx
|_assets
|  |_css
|    |_customStyle.css
|__index.html

My webpack.config.js looks like this

var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    entry: './source/js/index.jsx',
    output: {
        filename: 'bundle.js',
        publicPath: 'http://localhost:8090/assets'
    },
    module: {
        loaders: [
            {
                test: /\.jsx$/,
                loader: 'jsx-loader?insertPragma=React.DOM&harmony'
            },
            {
              test: /\.css$/,
              loader: ExtractTextPlugin.extract("style-loader","css-loader")
            }
        ]
    },
    externals: {

        'react': 'React'
    },
    resolve: {
        extensions: ['', '.js', '.jsx','.css']
    },
    plugins:[
      new ExtractTextPlugin("styles.css")
    ]
}

Html file looks like this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="../node_modules/react/dist/react-with-addons.js"></script>
<!-- like to link css here but don't know the path to link to -->
</head>
<body>
  <div id="container">

  </div>
  <script src="http://localhost:3000/webpack-dev-server.js"></script>
  <script src="http://localhost:3000/assets/bundle.js"></script>

</body>
</html>

Any help with some background on how the webpack way works and how to get my styles in would be fantastic.

It's 2yr old question and I guess you must have found the solution. If not then use extract-text-webpack-plugin, css-loader, html-webpack-plugin to organise the HTML, JSX, CSS files. — SkrewEverything
– SkrewEverything, Commented Sep 26, 2017 at 13:17

Thijs Koerselman · Accepted Answer · 2015-03-29 16:26:09Z

4

Your css will be bundled together with the Javascript file. There is no seperate css file to link in your html. You can use the extract-text-webpack-plugin to create a separate css file for production.

Also you might want to avoid putting absolute urls in your html. Better use a template and have webpack inject the right script tags by using the html-webpack-plugin. This is what your template might look like (example taken from YARSK):

<!doctype html>
<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
    <title>Yet Another React Starter Kit</title>
    <link rel="stylesheet" href="app.{%=o.webpack.hash%}.css" media="all">
  </head>
  <body>
    <div id="app"></div>

    <script src="{%=o.htmlWebpackPlugin.assets.main%}"></script>
  </body>
</html>

I suggest to have a look at the YARSK starter kit to see how it's done.

edited Mar 29, 2015 at 16:26

answered Mar 29, 2015 at 16:17

Thijs Koerselman

23.4k25 gold badges85 silver badges122 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Juho Vepsäläinen · Accepted Answer · 2015-12-17 09:26:55Z

2

html-webpack-plugin can generate index.html for you. If you need something more custom, it allows you to customize the template it uses. I've found this plugin highly useful in practice.

I go into more detail at a chapter of mine. It shows how various bits connect to each other.

answered Dec 17, 2015 at 9:26

Juho Vepsäläinen

27k13 gold badges83 silver badges109 bronze badges

Comments

Janne · Accepted Answer · 2017-02-25 19:04:44Z

0

You don't have to care that much about css with webpack. All it needs is that it finds them with require. More important is the way you organize them in your source folders. We had a large project and since with all the components it became quite scattered. We decided to place common style files to one place and then component specific under component folder.

answered Feb 25, 2017 at 19:04

Janne

1,73515 silver badges22 bronze badges

Collectives™ on Stack Overflow

Webpack css setup and best practise

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related