Webpack 4 模块解析失败:意外字符“@"(1:0)

问题描述

当我尝试运行 npm run dev 以将我的 scss 编译为 css 时出现此错误.我知道这个问题与 @import

I get this error when i try to run npm run dev to compile my scss to css. I know that issue is related to @import

./src/scss/main.scss 中的错误模块解析失败:意外字符@"(1:0)您可能需要一个合适的加载器来处理这种文件类型.|@import "标题";@ ./src/index.js 3:0-27

src/index.jsimport "./scss/main.scss";

src/scss/main.sccs

@import "header";

webpack.config.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()
  ]
  };`

package.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"
    }
}

推荐答案

问题出在您的 module.rule 中，用于处理项目中的 SASS 相关文件.在您的规则中，您只包含要编译成 CSS 的 <path>/src/sass/ 目录中的 SASS 文件:

The issue is within your module.rule for handling SASS related files within your project. Within your rule you're only including the SASS files from within your <path>/src/sass/ directory to be compiled into 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 文件//代码>目录:

However, a quick scan of your directory structure shows that your index.js file is actually importing your main.scss file from within the src/scss/ directory:

index.js:

import "./scss/main.scss";.

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

This is a problem because your SASS rule is only going to compile SASS related files to CSS from within the src/sass directory, but your SASS related files are actually located within your src/scss directory.

因此，您的 SASS 文件实际上从未正确编译为 CSS.

要解决此问题，请一起删除 include 部分或将包含位置更改为 SASS 文件的正确路径位置:

To resolve this either remove the include part all together or change the include location to the correct path location of your SASS files:

包括:[path.resolve(__dirname, 'src', 'scss')],

我会考虑做的另一件事是将 .scss 扩展名添加到您的 main.scss 文件中的导入中:

Another thing I would consider doing is adding the .scss extension to your imports within your main.scss file:

@import "header.scss";

或者在你的 webpack.config.js 文件中添加一个解析部分，这样你就可以简化你的导入，并且仍然让 webpack 适当地处理它们.类似的东西:

or alternatively adding a resolve section within your webpack.config.js file so you can simplify your imports and still have webpack handle them appropriately. Something along the lines of:

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

希望有帮助！

这篇关于Webpack 4 模块解析失败:意外字符“@"(1:0)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！