Webpack SCSS to CSS extraction not working

Question

I am trying to extract SCSS to CSS on my react.js app using webpack plugin: extract-text-webpack-plugin. I am not getting any errors but i can't see any style on my page when i compile. In the following code i am simply trying to change the color of hello world rendered on the screen from black to red. Here are my files:

webpack.config.js

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


module.exports = {
    devtool: 'inline-source-map',
    entry: [
        'webpack-dev-server/client?http://127.0.0.1:8080/',
        'webpack/hot/only-dev-server',
        './src/index.js',
        './sass/styles.scss'
    ],
    output: {
        path: path.join(__dirname, 'public'),
        filename: 'bundle.js'
    },
    resolve: {
        modules: ['node_modules', 'src'],
        extensions: ['.js', '.jsx']
    },
   module: {
            rules: [
        {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            use: ['react-hot-loader', 'babel-loader']
        },

        { // regular css files
            test: /\.css$/,
            loader: ExtractTextPlugin.extract({
              loader: 'css-loader?importLoaders=1',
            }),
        },

        { // sass / scss loader for webpack
            test: /\.(sass|scss)$/,
            loader: ExtractTextPlugin.extract(['css-loader', 'sass-loader'])
        }

    ]
},

plugins: [
     new webpack.HotModuleReplacementPlugin(),
     new webpack.NoEmitOnErrorsPlugin(),
     new ExtractTextPlugin("styles.css")
   ]
 };

styles.scss

$color : red;

.hello{
   font-color: $color;
   text-align: center;
}

app.js

import React from 'react';

export default class App extends React.Component {
    render() {
        return (
     <div>
        <h1 className = "hello">Hello World</h1>
      </div>);
    }
}

index.js

import React from 'react';
import { render } from 'react-dom';
import App from './components/app';

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

What i'm I missing?

Dan O · Accepted Answer · 2017-05-03 11:08:30Z

4

you're missing style-loader from your loader chain.

from the sass-loader docs:

Chain the sass-loader with the css-loader and the style-loader to immediately apply all styles to the DOM.

// webpack.config.js
module.exports = {
    ...
    module: {
        rules: [{
            test: /\.scss$/,
            use: [{
                loader: "style-loader" // creates style nodes from JS strings
           }, {
               loader: "css-loader" // translates CSS into CommonJS
           }, {
               loader: "sass-loader" // compiles Sass to CSS
            }]
        }]
    }
};

answered May 3, 2017 at 11:08

Dan O

6,0802 gold badges35 silver badges52 bronze badges

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

3 Comments

ss_millionaire Over a year ago

Thanks. The text is now centered on the screen as specified in the SCSS file but the color isn't changing.

ss_millionaire Over a year ago

Got it to work by changing font-color : $color; to color : $color. Cheers

Travis Delly Over a year ago

This is the correct answer for anyone who doesn't understand, basically the removed the array for the loaders, and added the use option! You sir have my upvote:)

Mr.Van · Accepted Answer · 2017-05-03 11:12:37Z

0

you need import styles.scss in code index.js

import 'yourlink/styles.scss'

answered May 3, 2017 at 11:12

Mr.Van

363 bronze badges

Collectives™ on Stack Overflow

Webpack SCSS to CSS extraction not working

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related