Vue-cli: When I set the CSS modules to true, how to ignore the node_modules style?

[he-zhiyong]

What problem does this feature solve?

I want to use css modules in my project, but if I set the “modules: true“ in the vue.config.js , some style from node_modules will be tranfrom,how to ignore the node_modules style?

What does the proposed API look like?

// vue.config.js

css: {
loaderOptions: {
css: {
localIdentName: '[local]___[hash:base64:5]',
},
less: {
javascriptEnabled: true,
},
},
sourceMap: true,
modules: true
},

[yyx990803]

Some options:

1. Use <link rel="stylesheet"> directly in public/index.html

2. Use inline wepback request (import '!!vue-style-loader!css-loader!path-to-file')

3. Don't use modules: true, and use *.module.css for CSS modules.

4. Use chainWebpack to add exclude for internal rule, then add a rule for CSS in node_modules yourself.

[yanchang0210]

不太明白

[he-zhiyong]

尤大的第4种方法可以解决，就是先把你的三方库exclude掉，然后自己去针对这个库写一下loader。

[wsz7777]

使用exclude有点问题

 config.module
      .rule("css")
      .exclude.add(path.resolve(__dirname, "node_modules"))
      .end()
      .end()
      .rule("includeCss")
      .test(/\.css$/)
      .include.add(path.resolve(__dirname, "node_modules"))
      .end()
      .use("css-loader")
      .loader("css-loader")
      .options({
        sourceMap: false,
        importLoaders: 1,
        modules: false
      });

我这样写还是没有办法引入node_modules下的css。。。有点小崩溃