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

Posted 2023-02-22

【中文标题】Webpack, sass-loader w/ node-sass 无法解析模块 @import ("Unexpected character \'@\'")

【英文标题】：Webpack, sass-loader w/ node-sass fails to parse module @import ("Unexpected character '@'")Webpack, sass-loader w/ node-sass 无法解析模块 @import ("Unexpected character '@'")

【发布时间】：2020-07-17 18:33:14

【问题描述】：

概述： 我正在尝试使用带有“node-sass”、“sass-loader”、“css-loader”和“style-loader”的 Webpack 编译 SCSS，并且没有特定的 JS 框架，除了 Typescript 作为 JS 转译器。

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

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

观察到的错误：

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

模块解析失败：意外字符'@' (1:0)

您可能需要适当的加载程序来处理此文件类型，目前没有配置加载程序来处理此文件。见https://webpack.js.org/concepts#loaders @import '重置';

|

| /*

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

@./app.ts

ℹ｢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'
;

【参考方案1】：

看起来你不小心引用了你的正则表达式：

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