CODEWITHSUNDEEP
node.jsreactjsnpmwebpacksass
adapap
adapap

Reputation: 665

Using SASS with ReactJS and Webpack

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?

Upvotes: 0

Views: 1559

Answers (1)

DiegoTArg
DiegoTArg

Reputation: 487

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.

Upvotes: 3

Related Questions