Failed to load scss with webpack

Question

I'm using webpack, and I want to load scss file in my JavaScript. (Or if it can be separate, it also fine).

This is my webpack config:

"use strict";
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');

module.exports = {
    context: __dirname + '/src',
    entry: './js/index.js',
    output: {
        path: './build',
        filename: 'js/app.bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            },
            {
                test: /\.scss$/,
                loaders: ["style", "css", "sass"]
            }
        ]
    },
    resolve: {
        root: [
            path.resolve('./src/js'),
            path.resolve('./src/scss')
        ],
        extensions: ['', '.js']
    },
    plugins: [
        new CopyWebpackPlugin([
            { from: 'html/**', to: `${__dirname}/build/html`, flatten: true },
            { from: 'images/**', to: `${__dirname}/build/image`, flatten: true }
        ])
    ]
};

this is my files list:

src/html/index.html -> build/html/index.html (WORKED)
src/images/** -> build/images/** (WORKED)
src/js/index.js -> build/js/app.bundle.js (WORKED)
src/scss/** -> build/css/** (NOT WORKED)

This is my JavaScript code. I just started project, so not much codes:

import "babel-polyfill";
import React from 'react';
import ReactDOM from 'react-dom';
import moduleA from 'moduleA';
import "view/startup.scss";

ReactDOM.render(
    <div>
        <h1>Helloworld!</h1>
    </div>,
    document.getElementById('entry')
);

You can see this: import "view/startup.scss"; I want to load scss file into my JavaScript, but when I run webpack command, it says:

ERROR in Loader /Users/.../Desktop/work/my-project/app/node_modules/css/index.js didn't return a function @ ./scss/view/startup.scss 4:14-123

in "resolve" property of webpack config, you can see that I added another root directory for scss, also I loaded sass-loader too, but it doesn't work and I don't know why.

And as I know, with Webpack, including css/scss automatically injects into destination file, so it doesn't matter it needs to be extract as separate file, I just want that this works.

Any help will be very appreciated :)

* UPDATED * code of ./scss/view/startup.scss

#startup {
    background-color: #7087d7;
}

robertklep robertklep · Accepted Answer · 2016-09-08T12:07:37

The error points towards the reason (I highlighted the relevant part):

ERROR in Loader /Users/.../Desktop/work/my-project/app/node_modules/css/index.js didn't return a function @ ./scss/view/startup.scss 4:14-123

When you declare a loader in Webpack, you can leave off the -loader suffix (so css-loader becomes css) provided that you don't have other modules that may match the suffixless loader name.

This is where it fails in your case, because you also use the css package, which Webpack tries to use as a loader (and fails, because it's not).

To fix this, use the full loader package name:

 loaders : [ "style-loader", "css-loader", "sass-loader" ]

Failed to load scss with webpack

1 Answers