如何在使用 webpack 构建期间将 css-in-js（样式化组件）移动到外部 css 文件 - ReactJS

Question

我试图找出构建 React 项目时 CSS 文件所在的位置。我正在使用 webpack，如果我使用普通 CSS，我可以为整个项目中使用的所有样式创建一个 CSS 文件。当我使用样式组件在 js 中使用 CSS 时，我没有得到外部 CSS 文件。

webpack.config.js

var path    = require('path');
var hwp     = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');


module.exports = {
    entry: path.join(__dirname, '/src/index.js'),
    output: {
        filename: 'index.js',
        path: path.join(__dirname, './dist'),
        publicPath : '/'
    },
    module:{
        rules:[{
            exclude: /node_modules/,
            test: /\.js$/,
            loader: 'babel-loader'
    },
    {
        test: /\.css$/i,
        use: [
            {
            loader : MiniCssExtractPlugin.loader,
            options : {
                publicPath: '/public/path/to/',
            },
        }, 
        'css-loader'
    ]
      }
    ]
    },
    devServer: {
        historyApiFallback: true,
      },
    plugins:[
        new hwp({template:path.join(__dirname, '/src/index.html')}),
        new MiniCssExtractPlugin({
            filename : '[name].css',
            chunkFilename : '[id].css',
        })
    ]
}

联系人.js

import React from 'react'
import styled from "styled-components"

const Container = styled.div`
    background-color : red;
`

 function contact() {
    return (
        <Container>
            <h1>
                Welcome to Contacts page
            </h1>
            
        </Container>
    )
}
export default contact

Answer 1

不支持此操作styled-components at the moment。来自项目成员 -

We don't support static CSS extraction. You can try out emotion which does.

You might not need static CSS extraction actually, because of several reasons:

There's SSR which sends only critical CSS, instead of all static CSS, for the entire page. You don't even need to do SSR, but can use snapshotting (react-snapshot) or generate a static page (gatsby, et al), which basically saves a SSR result to a html.
Static extraction doesn't generate dynamic CSS, which means your page will either appear broken until the JS executes, or you'll need to defer until the JS is loaded
Caching doesn't actually buy you an advantage, because the JS bundles will likely always change in tandem with the extracted CSS
In v3 we will add preprocessing, which will actually a bigger advantage. As part of that we might support an option for static extraction, since the core library that will bring preprocessing will probably also be integrated into emotion, which does support extraction. So it might become an option. Or not 

来源

Emotion 还删除了静态 css 提取

重复如何选择 React Styled-Components 来生成物理 CSS 文件？