当我试图运行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"
}
}
5条答案
按热度按时间j2qf4p5b1#
这个问题是在您的
module.rule
中处理项目中与SASS相关的文件。在您的规则中,您只包含<path>/src/sass/
目录中的SASS文件,这些文件将被编译为CSS:但是,快速扫描目录结构会发现,
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适当地处理它们。希望这能帮上忙!
00jrzges2#
若要解决
Webpack 4
的这个问题,请先透过npm
安装sass-loader
、node-sass
、style-loader
和css-loader
:然后将此规则添加到
webpack.config.js
:**注意:**顺序很重要,例如:不要把
css-loader
放在style-loader
之前,否则你可能会得到奇怪的错误!qoefvg9y3#
我通过以下链接修复了这些类似的问题。
我更新了
webpack.config.js
的rule
部分,如下所示然后按如下所示安装依赖项。
使用Yarn
使用npm
6yoyoihd4#
只需将这些行添加到webpack.config.js的规则下:
hmmo2u0o5#
我有
import 'tailwindcss/tailwind.css'
在我的一个Typescript文件,删除它为我修复了它