FontAwesome代码不包含在webpack css包中

ou6hu8tu  于 2023-10-19  发布在  Webpack
关注(0)|答案(1)|浏览(162)

我使用Webpack 5和FontAwesome 5。我正在使用MiniCssExtractPlugin从SASS中提取一个bundle css文件。图标显示正常,但当我检查页面时,有一个带有一堆Fontawesome代码的大样式标签,我不希望页面中有样式标签:Devtools Print
我从来没有使用过webpack,我还在学习。我已经研究和尝试了很多东西,但我不知道我做错了什么。

main.js(入口点)

  1. // Importing SCSS
  2. import "./scss/style.scss";
  3. // Importing Fontawesome Icons
  4. import '@fortawesome/fontawesome-free/js/fontawesome'
  5. import '@fortawesome/fontawesome-free/js/solid'
  6. import '@fortawesome/fontawesome-free/js/regular'
  7. import '@fortawesome/fontawesome-free/js/brands'
  8. //...

webpack.config.js

  1. const path = require("path");
  2. const HtmlWebpackPlugin = require("html-webpack-plugin");
  3. const MiniCssExtractPlugin = require("mini-css-extract-plugin");
  4. module.exports = {
  5. entry: {
  6. portal: "./src/portal/main.js"
  7. },
  8. output: {
  9. filename: "static/js/[name].bundle.js",
  10. path: path.resolve(__dirname, "dist/"),
  11. publicPath: '/dist/'
  12. },
  13. module: {
  14. rules: [
  15. {
  16. test: /\.m?js$/,
  17. exclude: /(node_modules|bower_components)/,
  18. use: {
  19. loader: 'babel-loader',
  20. options: {
  21. presets: ['@babel/preset-env']
  22. },
  23. }
  24. },
  25. {
  26. test: /\.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
  27. type: 'asset/resource',
  28. generator: {
  29. filename: 'static/fonts/[name][ext]',
  30. }
  31. },
  32. {
  33. // extract images (except svg)
  34. test: /\.(jpe?g|png|gif)$/,
  35. type: 'asset/resource',
  36. generator: {
  37. filename: 'static/img/[name][ext]',
  38. }
  39. },
  40. {
  41. test: /\.(scss)$/,
  42. use: [
  43. {
  44. //extract css into separate file
  45. loader: MiniCssExtractPlugin.loader,
  46. },
  47. {
  48. // translates CSS into CommonJS modules
  49. loader: "css-loader",
  50. },
  51. {
  52. // Run postcss actions
  53. loader: "postcss-loader",
  54. options: {
  55. // `postcssOptions` is needed for postcss 8.x;
  56. // if you use postcss 7.x skip the key
  57. postcssOptions: {
  58. // postcss plugins, can be exported to postcss.config.js
  59. plugins: [
  60. [
  61. "autoprefixer",
  62. {},
  63. ],
  64. ],
  65. },
  66. },
  67. },
  68. {
  69. // compiles Sass to CSS
  70. loader: "sass-loader",
  71. },
  72. ],
  73. },
  74. {
  75. test: /\.html$/,
  76. type: "asset/resource",
  77. generator: {
  78. filename: "templates/[name][ext]",
  79. },
  80. },
  81. ],
  82. },
  83. plugins: [
  84. new HtmlWebpackPlugin(),
  85. new MiniCssExtractPlugin({
  86. filename: "static/css/[name].bundle.css"
  87. }),
  88. ],
  89. };
csbfibhn

csbfibhn1#

您可以在使用导入任何Font Awesome图标之前将config.autoAddCss设置为false,然后手动导入CSS,从而将Font Awesome 5配置为不注入CSS。例如,在您的案例中:

  1. // Importing SCSS
  2. import "./scss/style.scss";
  3. // Disable Font Awesome CSS
  4. import { config } from "@fortawesome/fontawesome-svg-core";
  5. config.autoAddCss = false;
  6. // Import Font Awesome CSS
  7. import "@fortawesome/fontawesome-svg-core/styles.css";
  8. // Importing Fontawesome Icons
  9. import '@fortawesome/fontawesome-free/js/fontawesome'
  10. import '@fortawesome/fontawesome-free/js/solid'
  11. import '@fortawesome/fontawesome-free/js/regular'
  12. import '@fortawesome/fontawesome-free/js/brands'

您可以在Font Awesome的文档中的内容安全策略下找到更多信息(这听起来像是一个奇怪的地方,但在某些情况下您需要使用该解决方案来正确设置CSP)。

展开查看全部

相关问题