[英]Module parse failed: Unexpected character '@'You may need an appropriate loader to handle this file type.(Webpack : 4.4.0)
I am getting this error while migrating webpack. 我在迁移webpack时遇到此错误。 Below is my webpack.config.js. 下面是我的webpack.config.js。 I also attached error screenshot. 我还附上了错误截图。 Please find attachment. 请查收附件。
I am already added sass-loader ,css-loader,style-loader. 我已经添加了sass-loader,css-loader,style-loader。 If i am doing anything wrong please tell me guys. 如果我做错了什么,请告诉我们。
Not sure what error is.... Thanks in advance for help 不确定是什么错误....提前感谢您的帮助 Webpack.config.js Webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const settings = {
distPath: path.join(__dirname, "dist"),
srcPath: path.join(__dirname, "src")
};
function srcPathExtend(subpath) {
return path.join(settings.srcPath, subpath)
}
module.exports = (env, options) => {
const isDevMode = options.mode === "development";
return {
devtool: isDevMode ? "source-map" : false,
resolve: {
extensions: [".ts", ".tsx", ".js"],
},
module: {
rules: [
{
test: /\.tsx?$/,
use: ["babel-loader", "ts-loader", "tslint-loader"]
},
{
test: /\.scss$/,
use: [
"style-loader",
{
loader: "css-loader",
options: {
sourceMap: isDevMode
}
},
{
loader: "postcss-loader",
options: {
plugins: [
require("autoprefixer")()
],
sourceMap: isDevMode
}
},
{
loader: "sass-loader",
options: {
sourceMap: isDevMode
}
}
]
},
{
test: /\.(ttf|eot|woff|woff2)$/,
use: {
loader: "file-loader",
options: {
name: "fonts/[name].[ext]",
},
},
},
{
test: /\.(jpe?g|png|gif|svg|ico)$/i,
use: [
{
loader: "file-loader",
options: {
outputPath: "assets/"
}
}
]
},
{
test: /\.js$/,
exclude: /node_modules/,
use: [
'babel-loader'
]
}
]
},
plugins: [
new CleanWebpackPlugin([settings.distPath], {
verbose: true
}),
new HtmlWebpackPlugin({
template: srcPathExtend("index.ejs")
})
]
};
};
Replace this 替换它
{
test: /\.(ttf|eot|woff|woff2)$/,
use: {
loader: "file-loader",
options: {
name: "fonts/[name].[ext]",
},
},
}
With this code 有了这段代码
{
test: /\.(woff|woff2|eot|ttf|svg)$/,
loader: 'url-loader?limit=100000'
}
First install the url-loader
package 首先安装url-loader
包
You can try different URL in your CSS file, instead of 您可以在CSS文件中尝试不同的URL,而不是
src: url("./alter.ttf") src:url(“./ alter.ttf”)
try this one: 试试这个:
src: url("/alter.ttf");
or this: 或这个:
src: url("/images/alter.ttf");
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.