css - 使用 React 和 webpack 的模块

Question

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

组件.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 文件时，它都会被编译。