webpack - Webpack 4 模块解析失败:意外字符“@”(1:0)
问题描述
当我尝试运行npm run dev
以将我的 scss 编译为 css 时出现此错误。我知道这个问题与@import
./src/scss/main.scss 中的错误 模块解析失败:意外字符 '@' (1:0) 您可能需要适当的加载程序来处理此文件类型。| @import "标题"; @ ./src/index.js 3:0-27
src/index.js
import "./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()
]
};`
包.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 相关的文件。在您的规则中,您只包含<path>/src/sass/
要编译成 CSS 的目录中的 SASS 文件:
{
test: /\.scss$/,
include: [
path.resolve(__dirname, 'src', 'sass')
],
use: ['style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader']
}
但是,快速扫描您的目录结构会显示您的index.js
文件实际上是main.scss
从src/scss/
目录中导入您的文件:
index.js:
import "./scss/main.scss";
.
这是一个问题,因为您的 SASS 规则只会将 SASS 相关文件从src/sass
目录中编译为 CSS ,但您的 SASS 相关文件实际上位于您的src/scss
目录中。
因此,您的 SASS 文件永远不会真正正确地编译为 CSS。
要解决此问题,请include
一起删除该部分或将包含位置更改为 SASS 文件的正确路径位置:
include: [
path.resolve(__dirname, 'src', 'scss')
],
我会考虑做的另一件事是将.scss
扩展名添加到文件中的导入中main.scss
:
@import "header.scss";
或者在你的webpack.config.js
文件中添加一个解析部分,这样你就可以简化你的导入并且仍然让 webpack 适当地处理它们。类似于以下内容:
resolve: {
extensions: ['.js', '.jsx', '.scss']
}
希望这会有所帮助!
推荐阅读
- typescript - 如何在 TS 中键入装饰器
- rust - 如何将浮点数转换为具有相同字节表示的整数?
- android - Camera2默认控制场景模式为CONTROL_SCENE_MODE_FACE_PRIORITY
- php - 如何在 WooCommerce 商店页面中为未登录用户显示不同的图像?
- python - Selenium (Python):元素不可点击
- typescript - 如何声明必须可以为空或不可定义的类型
- python - 尝试使用 Jupyter Notebooks 从模块导入函数时出现 ModuleNotFoundError
- python - TOP 10 数据框 + 条形图
- python - Python selenium 向下滚动 Instagram 用户喜欢
- python - 这些句子使用 Rasa NLU 是什么意思?