Duplicate loaders for .css

[clarkdo]

Version

15.0.0-rc.1

Reproduction link

https://github.com/nuxt/nuxt.js/tree/dev/examples/async-component-injection

Steps to reproduce

Use <style src=""> to import css.

<template>
  <div> </div>
</template>

<script>
export default {
}
</script>

<style src="@/assets/css/index.css"/>

What is expected?

CSS can ben loaded by css-loader, vue-style-loader successfully.

What is actually happening?

Error:

Module build failed: Syntax Error
(5:1) Unknown word

---

According to my investigation, 5a9ee91 introduced this issue.

<style src="@/assets/css/index.css"/> will be applied to both rawLoaders(vue-style-loader, css-loader) and also cloned rules from vue-loader.

test and resourceQuery in VueLoaderPlugin can also be passed for this kind of css file.

[clarkdo]

Point to reproduce the issue:

1. add not null options on vue-style-loader

{
  test: /\.css$/,
  use: [
    { loader: "vue-style-loader", options: { } },
    'css-loader'
  ]
}

2. then run ssr.spec.js

The reason should be that if options is not null object, webpack will assign use item a new ident: https://github.com/webpack/webpack/blob/master/lib/RuleSet.js#L376

[yyx990803]

Looks like we may need to whitelist anything that may be used in CSS related rules.

Previously we did use a blacklist because some loaders do not allow unknown options (babel-loader, ts-loader).

Given that we probably going to have a much longer list if we use whitelists, it seems better to switch back to a blacklist...

[yyx990803]

Alternatively we need to at least include the following in the whitelist:

• css-loader
• (vue-)?style-loader
• postcss-loader
• extract-text-webpack-plugin's loader
• mini-css-extract-plugin's loader