CODEWITHSUNDEEP
node.jsreactjsnpmsass-loader
judehall
judehall

Reputation: 944

Sass-loader with Webpack, React and Babel not working

I apologize for a code-heavy post.

I'm both new to Node, React and Webpack and a first-time sass-loader user. I'm running into some problems which seem to be trivial, but aren't.

ERROR in ./app/index.js Module not found: Error: Can't resolve 'waterbottle.scss' in '/Volumes/500GB/Webs/waterbottle/app' @ ./app/index.js 4:13-40

I've tried placing the .scss file in the app folder, as well as fiddling with the .scss path.

Installation:

I installed sass-loader with

npm install sass-loader node-sass webpack --save-dev

webpack.config.js looks like this

var path = require('path');
var webpack = require('webpack');
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$/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015', 'react']
                }
            }
        ],
        rules: [
            {
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            }
        ]
    },
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'app.build.js'
    },
    plugins: [HTMLWebpackPluginConfig],
    stats: {
        colors: true
    },
    devtool: 'source-map',
    watch: true
};

package.json includes this in devDependencies

"node-sass": "^4.5.3",

index.js contains

const scss = require("waterbottle.scss");

File structure:

enter image description here

My understanding is that sass-loader should automatically inject css into the dom. Many thanks in advance.

Upvotes: 1

Views: 4868

Answers (2)

judehall
judehall

Reputation: 944

Solved. I needed to install:

npm install style-loader --save
npm install css-loader --save

And path to .scss file:

const scss = require("../scss/waterbottle.scss");

I'm very curious why this is not mentioned on sass-loader website, or better yet, installed automatically when running

npm install sass-loader node-sass webpack --save-dev

Upvotes: -1

aashah7
aashah7

Reputation: 2195

Sass loader documentation shows it like:

// 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
            }]
        }]
    }
};

Upvotes: 3

Related Questions