vuejs / vue-loader

📦 Webpack loader for Vue.js components
MIT License
4.99k stars 915 forks source link

feat: skip normal css files without scoped flag in stylePostLoader #2053

Closed Jinjiang closed 1 year ago

Jinjiang commented 1 year ago

So the loader vue-loader/dist/stylePostLoader.js can be used for pre-compiled Vue component files to handle scoped style imports.

e.g. in a Vue CLI project, you can just add these lines of code to make it work:

const { defineConfig } = require("@vue/cli-service");

module.exports = defineConfig({
  ...
  chainWebpack: (config) => {
    const ruleNameList = ["css", "scss", "sass", "less", "stylus"];
    ruleNameList.forEach((ruleName) => {
      const rule = config.module.rule(ruleName);
      rule
        .oneOf("normal")
        .use("style-post-loader")
        .loader("vue-loader/dist/stylePostLoader.js");
    });
    return config;
  },
});

...which would be great to be put into the default config of Vue CLI, despite it being out of maintenance.

Similar feature PR to Vite Plugin Vue: https://github.com/vitejs/vite-plugin-vue/pull/196