如何通过webpack将scss导入index.html？答案

【问题标题】：How to import scss into index.html through webpack?如何通过webpack将scss导入index.html？
【发布时间】：2022-01-04 01:36:25
【问题描述】：

你好我用vue/cli@next，但现在我需要<noscript></noscript> 项目中的模板设计。所以我不能使用 .vue 文件。我有

<body>
  <noscript>
    <div class="error-background"></div>
  </noscript>
  <div id=" app">
  </div>
</body>

和需要scss预处理器的样式，我可以把它内联，但我也想在这个样式中使用cssMinimizerWebpackPlugin和webpack scss loader来生成我的css代码。如何设置我的项目以使其成为可能？或者使用特殊要求...

【问题讨论】：

标签： webpack sass

【解决方案1】：

据我了解，您有一个已配置的 CssMinimizerWebpackPlugin，您需要通过插件优化代码并在没有 JS 的情况下由浏览器加载。最正确的解决方案是使用 MiniCssExtractPlugin 提取 CSS 如果您使用 vue/cli@next，您可以（例如，更多信息vue docs css）使您的代码如下：

  css: {
    extract: {
      filename:"css/[name][id].css",
      chunkFilename:"css/[name][id].css",
      ignoreOrder: false,
      insert: "document.head.appendChild(linkTag)",
      attributes: {},
      linkType: "text/css",
      runtime: false,
      experimentalUseImportModule: undefined,
    },
    sourceMap: process.env.NODE_ENV !== "production",
  },

你还需要为 htmlWebpackPlugin 创建多个入口点在 Vue Cli 5 中你可以使用vue docs pages

  pages: {
    index: {
      entry: ["src/main.ts", "styles/main.scss", "styles/error.scss"],
    },
  },

所有这些规则都应该在里面

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
//code here
})

【讨论】：