How can I compile and load the pure CSS in ReactJS with webpack?

Question

I am using a simple CSS based template for a ReactJS application with webpack module and not able to connect the CSS after compilation.

My webpack configuration looks like this...

var rucksack = require('rucksack-css')
var webpack = require('webpack')
var path = require('path')

module.exports = {
  context: path.join(__dirname, './src'),
  entry: {
    css : './public/assets/css/main.css',
    jsx: './index.js',
    html: './public/index.html',
    vendor: [
      'react',
      'react-dom',
      'react-redux',
      'react-router',
      'react-router-redux',
      'redux'
    ]
  },
  output: {
    path: path.join(__dirname, './static'),
    filename: 'bundle.js',
  },
  module: {
    loaders: [
      {
        test: /\.html$/,
        loader: 'file?name=[name].[ext]'
      },
      {
        test: /\.css$/,
        include: /src/,
        loaders: [
          'style-loader',
          'css-loader?modules&sourceMap&importLoaders=1&localIdentName=[local]___[hash:base64:5]',
          'postcss-loader'
        ]
      },
      {
        test: /\.css$/,
        exclude: /src/,
        loader: 'style!css'
      },
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loaders: [
          'react-hot',
          'babel-loader'
        ]
      },
    ],
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  postcss: [
    rucksack({
      autoprefixer: true
    })
  ],
  plugins: [

    new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js'),
    new webpack.DefinePlugin({
      'process.env': { NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development') }
    })
  ],
  devServer: {
    contentBase: './src',
    hot: true
  }
}

and relative path for my css file is 'src/public/assets/css/main.css'. Is there any way to use pure traditional CSS without changing it to the react based CSS-in-JS ?

score 0 · Answer 1 · answered Jul 07 '17 at 18:06

0

I keep the CSS as a seprate thing, i use gulp or grunt to make things easyer then include the files as your base html

answered Jul 07 '17 at 18:06

Matthew Proudman

1
1

Can I use both gulp and webpack, or will have to go with the one for the build? – Mohit Jul 07 '17 at 18:52
Yes but they will be separate so building CSS will use gulp and build react will use web pack – Matthew Proudman Jul 07 '17 at 20:59

score 0 · Answer 2 · answered Jul 07 '17 at 20:54

You could use the extract-text-webpack-plugin to pull your css out of your JS files. I believe the general best practice is to use the 'CSS-in-JS' (as you mentioned it) while working in development to benefit from hot-reloading. And then using the plugin above to build for production.

Also, it seems as though your config file has some redundancy.

 {
    test: /\.css$/,
    include: /src/,
    loaders: [
      'style-loader',
      'css-loader?modules&sourceMap&importLoaders=1&localIdentName=[local]___[hash:base64:5]',
      'postcss-loader'
    ]
  },
  {
    test: /\.css$/, // <--- this test seems redunant. Perhaps remove it.
    exclude: /src/,
    loader: 'style!css'
  },

How can I compile and load the pure CSS in ReactJS with webpack?

2 Answers2