首页 > 解决方案 > ReactJS - 导入组件会破坏 webpack

问题描述

我的 ReactJS 应用默认版本运行良好。当我升级我的应用程序以创建新版本并尝试导入新组件时,它会弄乱所有样式。新组件没有任何样式元素。我觉得当我导入新组件时,webpack 不会考虑现有的 css 文件。当我在导入的组件中手动导入缺少的 css 文件时,它运行良好。

网页包: :

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'public')
  },
  watch: true,
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ],
  module:{
    loaders: [
      {
        test:/\.js$/,
        exclude:/node_modules/,
        loader: 'babel-loader',
        query: {
          presets:['react','es2015', 'stage-1']
        }
      },
      {
         test:/\.(s*)css$/,
         use:['style-loader','css-loader', 'sass-loader'],
         include: path.resolve(__dirname, 'src/css')
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        loaders: [
          'file-loader?hash=sha512&digest=hex&name=[hash].[ext]',
          'image-webpack-loader?bypassOnDebug&optimizationLevel=7&interlaced=false'
        ]
      },
      {
        test: /\.(png|woff|woff2|eot|ttf|svg)$/,
        loader: 'url-loader?limit=100000'
      }
    ],

  }
}

反应组件:

`

import React from 'react'
import Header from './Header-backupWithSignup';
import Contact from './Contact';
import SiteMap from './SiteMap';
import Sidebar from './Sidebar';
import Upgrades from './Upgrades';
import Carefree from './Carefree';
import Trails from './Trails';
import AreaMap from './AreaMap';
import Siteplan from './Siteplan';
import Features from './Features';
import HomeDetails from './HomeDetails';
import Homes from './Homes';
import '../css/Stickey.css'
import $ from 'jquery'
import BottomStickyNav from './BottomStickyNav';
import CMS from './CMS/CMS';
import ProjectTemplateService from './../services/projectTemplateServices';
import AboutService from './../services/aboutService';
import Login from './Authentication/login';
import update from 'immutability-helper';
import '../css/master.css';

`

如果我删除 import master.css 语句,那么一切都会中断。master.css 文件确实将所有其他 css 文件导入其中。

我们希望确保 webpack 用于实时重新加载/同步更新的 css,而不是在我们的页面中硬编码 css 链接内联

请帮忙。

npm 版本:6.x 节点版本:10.x 在此处附加 webpack 文件。

标签: cssreactjswebpackimport

解决方案


推荐阅读