Question

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

使用Webpack 4，Rails webpacker和Vue.js，我已经建立了SPA。我已经添加了外部Vue组件Vue-infinite-loading。该组件提供了我添加的dist JS file：

在 application.js 中：

import InfiniteLoading from 'vue-infinite-loading'

此JS包含CSS，并且将样式添加到<head>标记中。我正在寻找一种在生产环境中避免这种情况的方法。我想将CSS移到我自己的application.css文件（由Webpack生成）中。

我找到了以下（不好的）解决方案：

外部组件使用LESS，而我在我的项目中没有使用。但是，如果我将LESS添加到我的项目中，则可以使用组件的源文件并使用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'
  ],
})
....

但是将LESS添加到我的项目中只是为了从外部组件中提取样式对我来说似乎不合适。有更好的方法吗？

是否可以从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',
  ],
})

Webpack 4：如何从Node模块中提取CSS？

1 个答案: