如何使用Webpack在构建过程中将CSS-in-js样式化组件移动到外部CSS文件-ReactJS

问题描述

我试图在构建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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）