Webpack， sass-loader w/ node-sass 无法解析模块@import ( "Unexpected character '@'" )

Question

概述：我正在尝试使用带有"node-sass"、"sass-loader"、"css loader"和&"样式加载程序"，除了作为JS传输程序的Typescript之外，没有特定的JS框架。

我已经尝试了我能想到或能在互联网上找到的一切，包括安装这些依赖关系的旧版本，我知道这些依赖关系正在其他项目中使用。在这一点上，我已经无计可施了。有人能认出我做错了什么吗？

如果我需要补充更多细节，请告诉我。

观察到的错误：

中的错误/src/styles/base.scss 1:0

模块分析失败：意外字符"@"(1:0(

您可能需要一个适当的加载器来处理此文件类型，目前没有配置任何加载器来处理该文件。看见https://webpack.js.org/concepts#loaders@导入"重置"；

|

|/*

@/src/layouts/page.ts 21:0-30

@/应用

ℹ ｢wdm：编译失败。

package.json详细信息：

• 主文件："main": "app.ts"
• 程序包版本：
  • "devDependencies": { "@types/webpack": "^4.41.10", "@types/webpack-dev-server": "^3.10.1", "css-loader": "^3.4.2", "node-sass": "^4.13.1", "sass-loader": "^8.0.2", "style-loader": "^1.1.3", "svg-inline-loader": "^0.8.2", "ts-loader": "^6.2.2", "typescript": "^3.8.3", "webpack": "^4.42.1", "webpack-cli": "^3.3.11", "webpack-dev-server": "^3.10.3" }
• 正在运行启动脚本：
  • "start": "webpack-dev-server --open"

Webpack配置：

const path = require('path');
const CWD = process.cwd();
const sass = require('node-sass');
module.exports = {
devtool: 'eval-source-map',
devServer: {
port: 4001
},
entry: {
app: './app.ts'
},
output: {
chunkFilename: '[id].js',
path: path.resolve(__dirname, 'dist'),
filename: '[name].bundle.js',
},
mode: 'development',
module: {
rules: [{
exclude: /node_modules/,
test: /.ts$/,
loader: 'ts-loader'
},
{
test: '/.(css|scss)$/',
use: [
// Creates `style` nodes from JS strings
'style-loader',
{
// Translates CSS into CommonJS
loader: 'css-loader',
options: {
modules: true
}
},
{
// Compiles Sass to CSS
loader: 'sass-loader',
options: {
sassOptions: {
includePaths: [path.resolve(CWD, 'src/styles')]
}
}
}
]
}]
},
// Fixes npm packages that depend on `fs` module
node: {
fs: 'empty'
},
resolve: {
extensions: ['.css', '.js', '.scss', '.ts'],
modules: [
'node_modules',
path.resolve(__dirname)
]
},
target: 'web'
};

Answer 1

看起来像是不小心引用了正则表达式：

- test: '/.(css|scss)$/',
+ test: /.(css|scss)$/,