Fail to import scss file to another scss file in ReactJS

Question

I install sass-loader, css-loader and style-loader. Here's my webpack config:

var HTMLWebpackPlugin = require('html-webpack-plugin');
var HTMLWebpackPluginConfig = new HTMLWebpackPlugin({
    template: __dirname + '/app/index.html',
    filename: 'index.html',
    inject: 'body'
});
module.exports = {
    entry: __dirname + '/app/index.js',
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            },
            {
                test: /\.scss$/,
                loaders: ['style-loader', 'css-loader']
            }
        ]
    },
    output: {
        filename: 'index.js',
        path: __dirname + '/build'
    },
    plugins : [HTMLWebpackPluginConfig]
};

I have 2 scss file within the same folder: main.scss and variable.scss. I want yo import variable .scss into main.scss but failed with the error message:"Module not found: Error: Can't resolve 'variables' ". Here is my main.scss:

@import "variables";

body {
  color: black;
}

dandel dandel · Accepted Answer · 2017-12-12T05:09:04

You probably need to install and also add the config for the sass-loader, which also requires node-sass as a dependency: https://github.com/webpack-contrib/sass-loader

Fail to import scss file to another scss file in ReactJS

1 Answers