我使用Webpack 5和FontAwesome 5。我正在使用MiniCssExtractPlugin
从SASS中提取一个bundle css文件。图标显示正常,但当我检查页面时,有一个带有一堆Fontawesome代码的大样式标签,我不希望页面中有样式标签:Devtools Print。
我从来没有使用过webpack,我还在学习。我已经研究和尝试了很多东西,但我不知道我做错了什么。
main.js(入口点)
// Importing SCSS
import "./scss/style.scss";
// Importing Fontawesome Icons
import '@fortawesome/fontawesome-free/js/fontawesome'
import '@fortawesome/fontawesome-free/js/solid'
import '@fortawesome/fontawesome-free/js/regular'
import '@fortawesome/fontawesome-free/js/brands'
//...
webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry: {
portal: "./src/portal/main.js"
},
output: {
filename: "static/js/[name].bundle.js",
path: path.resolve(__dirname, "dist/"),
publicPath: '/dist/'
},
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
},
}
},
{
test: /\.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
type: 'asset/resource',
generator: {
filename: 'static/fonts/[name][ext]',
}
},
{
// extract images (except svg)
test: /\.(jpe?g|png|gif)$/,
type: 'asset/resource',
generator: {
filename: 'static/img/[name][ext]',
}
},
{
test: /\.(scss)$/,
use: [
{
//extract css into separate file
loader: MiniCssExtractPlugin.loader,
},
{
// translates CSS into CommonJS modules
loader: "css-loader",
},
{
// Run postcss actions
loader: "postcss-loader",
options: {
// `postcssOptions` is needed for postcss 8.x;
// if you use postcss 7.x skip the key
postcssOptions: {
// postcss plugins, can be exported to postcss.config.js
plugins: [
[
"autoprefixer",
{},
],
],
},
},
},
{
// compiles Sass to CSS
loader: "sass-loader",
},
],
},
{
test: /\.html$/,
type: "asset/resource",
generator: {
filename: "templates/[name][ext]",
},
},
],
},
plugins: [
new HtmlWebpackPlugin(),
new MiniCssExtractPlugin({
filename: "static/css/[name].bundle.css"
}),
],
};
1条答案
按热度按时间csbfibhn1#
您可以在使用导入任何Font Awesome图标之前将
config.autoAddCss
设置为false
,然后手动导入CSS,从而将Font Awesome 5配置为不注入CSS。例如,在您的案例中:您可以在Font Awesome的文档中的内容安全策略下找到更多信息(这听起来像是一个奇怪的地方,但在某些情况下您需要使用该解决方案来正确设置CSP)。