使用webpack从js组件中提取CSS

Question

我正在使用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源？

Answer 1

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

阅读有关此插件的更多信息