代码之家 › 专栏 › 技术社区 › judehall

带有Webpack、React和Babel的Sass加载程序不工作

sass-loader npm reactjs node.js

1

judehall · 技术社区 · 8 年前

我为一个代码繁重的帖子道歉。

中出错/应用程序/索引。未找到js模块:错误:无法解决 ./应用程序/索引。js 4:13-40

我已经试着放置了。应用程序文件夹中的scss文件,以及摆弄。scss路径。

我安装了带有

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

网页包。配置。js公司 看起来像这样

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

在devdependences中包含此内容

"node-sass": "^4.5.3",

指数js公司

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

文件结构:

2 回复 | 直到 8 年前

1

2

aashah7 8 年前

Sass loader

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

2

0

judehall 8 年前

解决了的。我需要安装:

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

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

我很好奇为什么没有提到这一点 sass-loader website

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