0

如何将已编译的 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 文件中提取样式吗?

4

1 回答 1

0

你不需要添加更少来提取你的 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',
  ],
})
于 2018-10-22T12:18:57.950 回答