Webpack 4: Как извлечь CSS из модуля Node? - PullRequest
Новая
       87

Webpack 4: Как извлечь CSS из модуля Node?

0 голосов
/ 22 октября 2018

Как я могу извлечь CSS из скомпилированного файла JS в свой собственный 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).

enter image description here

Я нашел следующее (плохое) решение:

Внешний компонент использует LESS, который я не использую в своем проекте.Но если я добавлю LESS в свой проект, я могу использовать исходные файлы компонента и использовать MiniCssExtractPlugin для извлечения стилей:

In 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?

1 Ответ

0 голосов
/ 22 октября 2018

Вам не нужно добавлять меньше, чтобы извлечь свой 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',
  ],
})
...