How to import scss into index.html through webpack?-CodePudding

Hello I use vue/cli@next, but now I need to make <noscript></noscript> template design in the project. So I cannot use .vue files. I have

<body>
  <noscript>
    <div ></div>
  </noscript>
  <div id=" app">
  </div>
</body>

and style that needs scss preprocessor, I can put it inline, but I also want to use cssMinimizerWebpackPlugin in this style and webpack scss loader to generate my css code. How can I set up my project to make it possible? Or use special require...

CodePudding user response：

As I understand, you have a configured CssMinimizerWebpackPlugin and you need the code to be optimized by the plugin and loaded by the browser without JS. The most correct solution would be to extract CSS using MiniCssExtractPlugin If you're using vue/cli@next u can (for example, more info vue docs css) make your code like this:

  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",
  },

and u also need to make multiple entry points for htmlWebpackPlugin in Vue Cli 5 u can use vue docs pages

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

all these rules should be inside

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