Webpack 4:如何从节点模块中提取CSS？

Question

如何将编译好的JS文件中的CSS提取到我自己的application.css中？我想用一个例子详细说明这个问题：

使用Webpack 4，Rails网络包装机和Vue.js，我建立了一个SPA。我添加了外部Vue组件Vue-无限加载。此组件提供了我添加的dist JS文件：

在application.js中

import InfiniteLoading from 'vue-infinite-loading'

这个JS包含CSS和，将样式添加到标记中。我在寻找一种在生产环境中避免这种情况的方法。我想将CSS移动到我自己的application.css文件(由Webpack生成)。

​

​

我找到了以下(坏的)解决方案：

外部组件使用的更少，我在项目中不使用。但是，如果我向我的项目添加更少的内容，我可以使用组件的源文件并使用MiniCssExtractPlugin提取样式：

在application.js中

import InfiniteLoading from 'vue-infinite-loading/src/index'

在environment.js中

....
const isProduction = process.env.NODE_ENV === 'production'
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
environment.loaders.append('less', {
  test: /\.less$/,
  use: [
    isProduction ? MiniCssExtractPlugin.loader : 'style-loader',
    'css-loader',
    'less-loader'
  ],
})
....

但是，在我的项目中添加更少的内容只是为了从外部组件中提取样式，对我来说似乎是不对的。有更好的办法吗？

是否可以从JS文件中提取样式？

Answer 1

不需要添加更少的内容就可以提取css。

const isProduction = process.env.NODE_ENV === 'production'
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
environment.loaders.append('css', {
  test: /\.css$/,
  use: [
    isProduction ? MiniCssExtractPlugin.loader : 'style-loader',
    'css-loader',
  ],
})