代码之家 › 专栏 › 技术社区 › Georg Ledermann

如何从节点模块中提取css?

mini-css-extract-plugin webpack-4 webpack css javascript

0

Georg Ledermann · 技术社区 · 7 年前

如何将编译后的js文件中的css提取到自己的application.css中?我想用一个例子来详细说明这个问题:

使用webpack 4, Rails webpacker 我建了一个水疗中心。我已经添加了外部vue组件 Vue-infinite-loading . 此组件提供 dist JS file 我补充道:

在 应用程序.js :

import InfiniteLoading from 'vue-infinite-loading'

这个js包括css和 将样式添加到 <head> 标签 。我正在寻找一种方法来避免在生产环境中出现这种情况。我想把css移到我自己的 application.css 文件(由webpack生成)。

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

外部组件使用较少,而我在项目中不使用。但是,如果我在项目中添加的内容较少,我可以使用组件的源文件并使用minicssextractplugin来提取样式:

在 应用程序.js :

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

在 环境.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文件中提取样式吗?

1 回复 | 直到 7 年前

1

0

PlayMa256 7 年前

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