使用 webpack 从 js 组件中提取 CSS

【问题标题】：extract CSS from js component with webpack使用 webpack 从 js 组件中提取 CSS
【发布时间】：2017-09-20 14:26:03
【问题描述】：

我正在使用 React 并将 CSS 与每个组件分开。我想从这些文件中提取 CSS。

// ComponentA.js
import "./ComponentA.css"
export default class ComponentA extends React.Component {
    ...
}

// ComponentB.js
import "./ComponentB.css"
export default class ComponentB extends React.Component {
    ...
}

// index.js
import ComponentA from "./ComponentA"
import ComponentB from "./ComponentB"
class App extends React.Component {
    render() {
        return (
            <div>
                <ComponentA />
                <ComponentB />
            </div>
        )
    }
}

在这种情况下，我如何提取和捆绑ComponentA.css 和ComponentB.css

没有编译整个 JS 源代码？

【问题讨论】：

标签： css reactjs webpack

【解决方案1】：

您需要使用extract-text-plugin 来执行此操作。它会将您的 css 捆绑到一个文件中。