尝试添加 .scss 文件时，webpack 无法构建

Question

已编辑： 我修复了 SCSS 文件的正则表达式(这实际上是一个错字，因为我将其发布到 Stack Overflow，但我一直遇到这个问题，正则表达式被正确键入。 但它并没有解决问题。 我仍然收到不完整的构建和错误消息，告诉我我没有为我尝试捆绑的 .scss 文件安装加载器， 即使我安装了 node-sass sass-loader css-loader 和 style-loader，导入了 CSS 文件，并正确编写了配置规则。

我将包括我的package.json，webpack.config.js和index的副本.js但就我对我现在正在处理的课程材料的最佳理解而言，我正确地安装了所有依赖项，将正确的规则添加到配置文件中，并在索引中导入scss文件.js也是正确的。 但是，每次我尝试构建时， 它失败并告诉我我的 .scss 文件没有正确的加载程序。

任何帮助将不胜感激。 这是我第一次尝试用 Sass 设置 Webpack。

package.json：

{
"name": "example-project",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"start": "node src/server/index.js",
"build-prod": "webpack --config webpack.prod.js",
"build-dev": "webpack-dev-server --config webpack.dev.js --open"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": "",
"dependencies": {
"express": "^4.17.1",
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10"
},
"devDependencies": {
"@babel/core": "^7.8.3",
"@babel/preset-env": "^7.8.3",
"babel-loader": "^8.0.6",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^3.4.2",
"html-webpack-plugin": "^3.2.0",
"node-sass": "^4.13.0",
"sass-loader": "^8.0.2",
"style-loader": "^1.1.2",
"webpack-dev-server": "^3.10.1"
}
}

webpack 配置文件：

const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
module.exports = {
mode: "production",
entry: "./src/client/index.js",
module: {
rules: [
{
test: '/.js$/',
exclude: /node_modules/,
loader: "babel-loader"
},
{
test: '/.scss$/',
use: ['style-loader', 'css-loader', 'sass-loader']
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/client/views/index.html",
filename: "./index.html"
}),
new CleanWebpackPlugin({
// Simulate the removal of files
dry: true,
// Write Logs to Console
verbose: true,
// Automatically remove all unused webpack assets on rebuild
cleanStaleWebpackAssets: true,
protectWebpackAssets: false
})
]
};

索引.js

import { handleSubmit } from "./js/formHandler";
import { nameChecker } from "./js/nameChecker";

import "./styles/resets.scss";
import  "./styles/base.scss";
import  "./styles/footer.scss";
import  "./styles/form.scss";
import "./styles/header.scss";
alert("this happened");

Answer 1

将这些行复制粘贴到我的规则中解决了我的问题。

{
test: /.s[ac]ss$/i,
use: [
// Creates `style` nodes from JS strings
'style-loader',
// Translates CSS into CommonJS
'css-loader',
// Compiles Sass to CSS
'sass-loader',
],
},

Answer 2

我也有这个问题。 我取出了周围的"标记 测试： '/.scss$/'， 行，问题消失了。 我认为 babel 正在纠正引号。

我不得不说我对引号感到非常困惑。 ' 或" 或 '它们似乎都有略有不同的用途，但我还不能真正解释它。

Answer 3

在你的 webpack 文件中，你只检查 css 文件。您还需要为 .scss 文件添加规则

更改以下行

{
test: '/.css$/', // You are checking for css files
use: ['style-loader', 'css-loader', 'sass-loader']
}

自

{
test: '/.scss$/',  // Add .scss instead
use: ['style-loader', 'css-loader', 'sass-loader']
}

或者，您可以添加检查css文件和scss文件的规则

{
test: '/.css$/', 
use: ['style-loader', 'css-loader']
},
{
test: '/.scss$/',
use: ['style-loader', 'css-loader', 'sass-loader']
}