时间戳

首页 > 解决方案 > Webpack 4：如何从 Node 模块中提取 CSS？

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

问题描述

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

使用 Webpack 4、Rails webpacker和 Vue.js，我构建了一个 SPA。我添加了外部 Vue 组件Vue-infinite-loading。这个组件提供了一个我添加的dist JS 文件：

在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 文件中提取样式吗？

标签： javascriptcsswebpackwebpack-4mini-css-extract-plugin

解决方案

你不需要添加更少来提取你的 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',
  ],
})

推荐阅读