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

【问题标题】：How to move css-in-js (Styled Components) to an external css files during build using webpack - ReactJS如何在使用 webpack 构建期间将 css-in-js（样式化组件）移动到外部 css 文件 - ReactJS
【发布时间】：2020-12-03 06:15:33
【问题描述】：

当我构建 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',
        })
    ]
}

Contact.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

【问题讨论】：

styled-components 会生成一个

标签： reactjs webpack build styled-components webpack-style-loader

【解决方案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 ?

Source

情感也有removed static css extraction

How can I opt for React Styled-Components to generate a physical CSS file? 的副本

【讨论】：