ReactJs | CSS and or SASS with react-boilerplate

May 5, 2017
No Comments

react-boilerplate

This is a very good boilerplate for react with advanced packages. For some reason, I wanted to use scss files, so tried to use css/scss files with this boilerplate.

Like mentioned in the documentation, we need to install the devDependencies first,

npm i -D sass-loader node-sass

Update on webpack config

I have tried the instructions with the docs, https://github.com/react-boilerplate/react-boilerplate/blob/master/docs/css/sass.md, but it seems this is outdated. With some modifications we can make it work.

Note: As of now, I am using react-boilerplate@3.4.0 (so, webpack@2.2.0-rc.3)

In internals/webpack/webpack.base.babel.js add,

{
  test: /\.(scss|css)$/,
  exclude: /node_modules/,
  loaders: ['style-loader', 'css-loader', 'sass-loader']
}

This will extract all the css/scss files included in our individual files and include in the index.html file inside a,

<style></style>

block.
We can include the files in our js files, where needed like,

import './about.scss';
import './about.css'

or with,

require('./about.scss');
require('./about.css');

All these files will be loaded into the index.html file in a style block.
If we want to track with sourceMap, we can do it with,

{
  test: /\.(scss|css)$/,
  exclude: /node_modules/,
  loaders: ['style-loader', 'css-loader?sourceMap', 'sass-loader?sourceMap']
}

Note: I have not tried beyond this point, so not tried with production build. For production build, we may need to remove the sourceMap in some way.

To have a separate sytle.css file

We can also move all the styles into a separate file, instead of the style block with the use of extract-text-webpack-plugin. First install the devDependency:
npm i -D extract-text-webpack-plugin
Then, update the file internals/webpack/webpack.base.babel.js.
Here is the config change to get it in the file,

{
  test: /\.css$/,
  include: /node_modules/,
  exclude: /app/,
  loaders: ['style-loader', 'css-loader'],
}, {
  test: /\.(css|scss)$/,
  exclude: /node_modules/,
  use: ExtractTextPlugin.extract({
	fallback: 'style-loader',
	use: ['css-loader', 'sass-loader']
  })
}
.
.
.
plugins: [
  new ExtractTextPlugin({
    filename: "style.css",
    allChunks: true
  })
]

This will bundle all the sytles included in our separate files and store it in style.css and also include the tag inside our index.html file.

Note: Here I have updated the previous item with exclude: /app/ because of some conflict, may be we can combine these both!

Separate file with sourceMap

To have the sourcemap, we have to update the loaders like, use: [‘css-loader?sourceMap’, ‘sass-loader?sourceMap’] and devtool inside internals/webpack/webpack.dev.babel.js like, devtool: ‘source-map’
Currently there is already a devtool mentioned (cheap-module-eval-source-map), but it is not working with the setup, but updating it to ‘source-map’ works fine.

Note: This works well with production build (without soureMap), because we specify the sourceMap specifically with dev configuration.

Tags: , , , ,