Using SASS with ReactJS and Webpack

Question

I have been having incredible difficulty getting Sass to work with my React setup. I have installed the css-loader, sass-loader, and style-loader which I have seen is needed. I also installed the extract-text-webpack-plugin which converts .scss to .css. Currently, i'm concerned with these files:

index.js

import React from 'react'
import ReactDOM from 'react-dom'

import App from './app.jsx'
require('./app.scss');

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

app.scss

@import 'styles/container.scss'

container.scss (./styles/container.scss)

body {
    color: green;
}

webpack.config.js

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

module.exports = {
    entry: './index.js',
    output: {
        filename: 'bundle.js'
    },
    plugins: [
        new ExtractTextPlugin({ filename: 'app.css', allChunks: true })
    ],
    module: {
        rules: [
            { test: /\.jsx?/, loader: 'babel-loader' },
            {
  test: /\.css$/,
  include: /node_modules/,
  exclude: /app/,
  loaders: ['style-loader', 'css-loader'],
}, {
  test: /\.s[ac]ss$/,
  exclude: /node_modules/,
  use: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: ['css-loader', 'sass-loader']
  })
}
        ]
    },
    devServer: {
        contentBase: path.join(__dirname, "."),
        port: 9000
    }
}

When I bundle it using Webpack, it runs well and creates the "app.css" file, but the styles are not applied to the React components. Using the dev webpack server, developer tools gives me this error:

./app.scss
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.

This might be my lack of React knowledge in play, or any of the other things that are required for this setup. Can anyone enlighten me on why Sass is not working properly?

DiegoTArg · Accepted Answer · 2017-10-27 00:13:44Z

3

I am not familiar with the extract-text-webpack-plugin that you mention, but to setup sass loader in Webpack I would do this:

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

Notice you would need sass-loader, css-loader and style-loader.

With this you can import your SCSS file as either require('./app.scss') or import './app.scss' if you are using es6.

I hope this helps.

answered Oct 27, 2017 at 0:13

DiegoTArg

4871 gold badge4 silver badges15 bronze badges

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

Collectives™ on Stack Overflow

Using SASS with ReactJS and Webpack

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related