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

Question

概览： 我正在尝试使用带有 "node-sass"、"sass-loader"、"css-loader"、& "style-loader" 的 Webpack 编译 SCSS，除了作为 JS 转译器的 Typescript 之外，没有特定的 JS 框架。

我已经尝试了所有我能想到的或可以在 Internet 上找到的方法，包括安装我知道在其他项目中工作的这些依赖项的旧版本。在这一点上，我束手无策。谁能发现我做错了什么？

如果我需要添加更多详细信息，请告诉我。

观察到的错误：

ERROR in ./src/styles/base.scss 1:0

Module parse failed: Unexpected character '@' (1:0)

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders @import 'reset';

|

| /*

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

@ ./app.ts

ℹ ｢wdm｣: Failed to compile.

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)$/,

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

Webpack, sass-loader w/ node-sass fails to parse module @import ("Unexpected character '@'")

webpack

sass

node-sass

sass-loader