Question

寻找使用Webpack和React捆绑CSS的好方法，并将每个组件样式表保存在单独的文件中。

Component.js

import React, {Component} from 'react'
import './Component.css'

Component2.js

import React, {Component} from 'react'
import './Component2.css'

现在我的webpack配置如下所示：

test: /\.css$/,
use: ['style-loader', 'css-loader', {
    loader: 'postcss-loader',
    options: {
        plugins: () => [require('autoprefixer')]
    }}]

这样我就可以将每个CSS文件分开，但最终会为每个组件添加一个样式标记。

有没有更好的方法来解决这个问题？

Answer 1

我觉得node-sass package很有用。使用npm / yarn安装并将这些行添加到package.json

"scripts": {
"build-css": "node-sass src/ -o src/",
"watch-css": "npm run build-css && node-sass src/ -o src/ --watch --recursive",
"start": "node scripts/start.js watch-css",
...
}

无论何时创建独立的SASS文件，都会进行编译。

使用react和webpack的模块

1 个答案: