带有 Webpack、React 和 Babel 的 Sass-loader 无法正常工作

Posted 2023-02-22

【中文标题】带有 Webpack、React 和 Babel 的 Sass-loader 无法正常工作

【英文标题】：Sass-loader with Webpack, React and Babel not working

【发布时间】：2018-03-02 03:46:42

【问题描述】：

对于代码繁重的帖子，我深表歉意。

我是 Node、React 和 Webpack 的新手，也是第一次使用 sass-loader 的用户。我遇到了一些看似微不足道的问题，但实际上并非如此。

./app/index.js 中的错误未找到模块：错误：无法解析 '/Volumes/500GB/Webs/waterbottle/app' 中的'waterbottle.scss' @ ./app/index.js 4:13-40

我已经尝试将 .scss 文件放在 app 文件夹中，以及摆弄 .scss 路径。

安装：

我用 sass-loader 安装了

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

webpack.config.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
;

package.json 包含在 devDependencies 中

"node-sass": "^4.5.3",

index.js 包含

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

文件结构：

我的理解是 sass-loader 应该自动将 css 注入到 dom 中。非常感谢。

【参考方案1】：

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】：

解决了。我需要安装：

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

.scss 文件的路径：

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

我很好奇为什么sass-loader website 上没有提到这个，或者更好的是，运行时自动安装

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

【讨论】：

我做了同样的事情并在我的组件中导入了 scss 文件但无法正常工作