Webpack 4模块解析失败：未预期的字符'@'(1：0)

kulphzqa 于 2022-11-13 发布在 Webpack

关注(0)|答案(5)|浏览(237)

当我试图运行npm run dev将scss编译为css时，我得到了这个错误。我知道这个问题与@import有关

./src/scss/main中的错误。scss模块解析失败：意外的字符“@”（1：0）您可能需要适当的加载程序来处理此文件类型。|@导入“表头”;*****
源代码/索引.jsimport "./scss/main.scss";
源代码/scss/主.sccs

@import "header";

网页包.配置.js

`
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebpackMd5Hash = require('webpack-md5-hash');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
    entry: { main: './src/index.js' },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].[chunkhash].js'
    },
    module: {
        rules: [{
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.scss$/,
                include: [
                    path.resolve(__dirname, 'src', 'sass')
                ],
                use: ['style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader']
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin('dist', {}),
        new MiniCssExtractPlugin({
            filename: 'style.[contenthash].css',
        }),

  new HtmlWebpackPlugin({
        inject: false,
        hash: true,
        template: './src/index.html',
        filename: 'index.html'
    }),
    new WebpackMd5Hash()
  ]
  };`

软件包.json

{
    "name": "post",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "build": "webpack --mode production",
        "dev": "webpack --mode development"
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "autoprefixer": "^8.2.0",
        "babel-core": "^6.26.0",
        "babel-loader": "^7.1.4",
        "babel-preset-env": "^1.6.1",
        "clean-webpack-plugin": "^0.1.19",
        "css-loader": "^0.28.11",
        "html-webpack-plugin": "^3.2.0",
        "mini-css-extract-plugin": "^0.4.0",
        "node-sass": "^4.8.3",
        "postcss-loader": "^2.1.3",
        "sass-loader": "^6.0.7",
        "style-loader": "^0.20.3",
        "webpack": "^4.4.1",
        "webpack-cli": "^2.0.13",
        "webpack-md5-hash": "0.0.6"
    }
}

webpack

来源：https://stackoverflow.com/questions/50477167/webpack-4-module-parse-failed-unexpected-character-10

5条答案

按热度按时间

j2qf4p5b1#

这个问题是在您的module.rule中处理项目中与SASS相关的文件。在您的规则中，您只包含<path>/src/sass/目录中的SASS文件，这些文件将被编译为CSS：

{
   test: /\.scss$/,
   include: [
      path.resolve(__dirname, 'src', 'sass')
   ],
   use: ['style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader']
}

但是，快速扫描目录结构会发现，index.js文件实际上是从src/scss/目录中导入main.scss文件：

索引.js：

import "./scss/main.scss"; .
这是一个问题，因为您的SASS规则 * 只会将src/sass目录中的SASS相关文件编译为CSS *，但您的SASS相关文件实际上位于您的src/scss目录中。

因此，您的SASS文件实际上从未适当地编译为CSS。

要解决此问题，请将include部分全部删除，或将include位置更改为SASS文件得正确路径位置：
include: [ path.resolve(__dirname, 'src', 'scss') ],
我会考虑做的另一件事是将.scss扩展添加到main.scss文件中的导入：
@import "header.scss";
或者在您的webpack.config.js文件中添加一个resolve部分，这样您就可以简化您的导入，并且仍然让webpack适当地处理它们。

resolve: {
    extensions: ['.js', '.jsx', '.scss']
}

希望这能帮上忙！

赞(0）回复(0）举报 2022-11-13

00jrzges2#

若要解决Webpack 4的这个问题，请先透过npm安装sass-loader、node-sass、style-loader和css-loader：

npm install sass-loader node-sass style-loader css-loader --save-dev

然后将此规则添加到webpack.config.js：

module.exports = {
  module: {
    rules: [
      // ...Other rules,
      {
        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',
        ],
      },
    ],
  },
};

**注意：**顺序很重要，例如：不要把css-loader放在style-loader之前，否则你可能会得到奇怪的错误！

赞(0）回复(0）举报 2022-11-13

qoefvg9y3#

我通过以下链接修复了这些类似的问题。
我更新了webpack.config.js的rule部分，如下所示

rules: [
    {
            test: /\.css$/,
            use : [
                {
                        loader: 'style-loader',
                },
                {
                        loader: 'css-loader',
                        options: {
                                sourceMap: true,
                        }
                }
            ]
    }
]

然后按如下所示安装依赖项。
使用Yarn

yarn add style-loader --dev
yarn add css-loader --dev

使用npm

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

赞(0）回复(0）举报 2022-11-13

6yoyoihd4#

只需将这些行添加到webpack.config.js的规则下：

{
  test: /\.css$/i,                                                                                                                                                             
  use: ["style-loader", "css-loader", "sass-loader"],                                                                                                                          
},

赞(0）回复(0）举报 2022-11-13

hmmo2u0o5#

我有import 'tailwindcss/tailwind.css'在我的一个Typescript文件，删除它为我修复了它

赞(0）回复(0）举报 2022-11-13