在create-react-app中更改了樣式組件css後，react-hot-loader沒有更新

Question

我正在使用「create-react-app」構建一個簡單的SPA。我遇到的問題是，當CSS從「樣式組件」更新時，「react-hot-loader」不起作用。它適用於普通的CSS文件，但不適用於樣式化的組件。我從create-react-app中退出。

這是我packag.json

{ 
    "name": "portfolio", 
    "version": "0.1.0", 
    "private": true, 
    "dependencies": { 
    "autoprefixer": "7.1.2", 
    "babel-core": "6.25.0", 
    "babel-eslint": "7.2.3", 
    "babel-jest": "20.0.3", 
    "babel-loader": "7.1.1", 
    "babel-preset-react-app": "^3.0.3", 
    "babel-runtime": "6.26.0", 
    "case-sensitive-paths-webpack-plugin": "2.1.1", 
    "chalk": "1.1.3", 
    "css-loader": "0.28.4", 
    "dotenv": "4.0.0", 
    "eslint": "4.4.1", 
    "eslint-config-react-app": "^2.0.1", 
    "eslint-loader": "1.9.0", 
    "eslint-plugin-flowtype": "2.35.0", 
    "eslint-plugin-import": "2.7.0", 
    "eslint-plugin-jsx-a11y": "5.1.1", 
    "eslint-plugin-react": "7.1.0", 
    "extract-text-webpack-plugin": "3.0.0", 
    "file-loader": "0.11.2", 
    "fs-extra": "3.0.1", 
    "html-webpack-plugin": "2.29.0", 
    "jest": "20.0.4", 
    "object-assign": "4.1.1", 
    "postcss-flexbugs-fixes": "3.2.0", 
    "postcss-loader": "2.0.6", 
    "promise": "8.0.1", 
    "react": "^16.0.0", 
    "react-dev-utils": "^4.1.0", 
    "react-dom": "^16.0.0", 
    "react-hot-loader": "^3.0.0", 
    "react-router-dom": "^4.2.2", 
    "style-loader": "0.18.2", 
    "styled-components": "^2.2.1", 
    "sw-precache-webpack-plugin": "0.11.4", 
    "url-loader": "0.5.9", 
    "webpack": "3.5.1", 
    "webpack-dev-server": "2.8.2", 
    "webpack-manifest-plugin": "1.2.1", 
    "whatwg-fetch": "2.0.3" 
    }, 
    "scripts": { 
    "start": "node scripts/start.js", 
    "build": "node scripts/build.js", 
    "test": "node scripts/test.js --env=jsdom" 
    }, 
    "jest": { 
    "collectCoverageFrom": ["src/**/*.{js,jsx}"], 
    "setupFiles": ["<rootDir>/config/polyfills.js"], 
    "testMatch": ["<rootDir>/src/**/__tests__/**/*.js?(x)", "<rootDir>/src/**/?(*.)(spec|test).js?(x)"], 
    "testEnvironment": "node", 
    "testURL": "http://localhost", 
    "transform": { 
     "^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest", 
     "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js", 
     "^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js" 
    }, 
    "transformIgnorePatterns": ["[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$"], 
    "moduleNameMapper": { 
     "^react-native$": "react-native-web" 
    }, 
    "moduleFileExtensions": ["web.js", "js", "json", "web.jsx", "jsx", "node"] 
    }, 
    "babel": { 
    "presets": ["react-app"] 
    }, 
    "eslintConfig": { 
    "extends": "react-app" 
    } 
} 

這是我的index.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import './index.css'; 
import App from './App'; 
import registerServiceWorker from './registerServiceWorker'; 

import { AppContainer } from 'react-hot-loader'; 

import './theme/globalStyle'; 

// const rootEl = document.getElementById('root'); 

ReactDOM.render(
    <AppContainer> 
    <App /> 
    </AppContainer>, 
    document.getElementById('root') 
); 
registerServiceWorker(); 

if (module.hot) { 
    module.hot.accept('./App',() => { 
    const App = require('./App').default; 
    ReactDOM.render(
     <AppContainer> 
     <App /> 
     </AppContainer>, 
     document.getElementById('root') 
    ); 
    }); 
} 

我和路線app.js。

import React, { Component } from 'react'; 
import { BrowserRouter, Route, Switch } from 'react-router-dom'; 

import Home from './components/Home'; 
import About from './components/About'; 
import Works from './components/Works'; 
import FourOhFour from './components/FourOhFour'; 

class App extends Component { 
    render() { 
    return (
     <BrowserRouter> 
     <div className="App"> 
      <Switch> 
      <Route exact path="/" component={Home} /> 
      <Route path="/about" component={About} /> 
      <Route path="/works" component={Works} /> 
      <Route component={FourOhFour} /> 
      </Switch> 
     </div> 
     </BrowserRouter> 
    ); 
    } 
} 

export default App; 

我也webpack.config.dev.js進入加'react-hot-loader/patch',和你的包在webpack.config.dev.js添加查詢插件

// Process JS with Babel. 
     { 
     test: /\.(js|jsx)$/, 
     include: paths.appSrc, 
     loader: require.resolve('babel-loader'), 
     query: { 
      // This is a feature of `babel-loader` for webpack (not Babel itself). 
      // It enables caching results in ./node_modules/.cache/babel-loader/ 
      // directory for faster rebuilds. 
      cacheDirectory: true, 
      plugins: ['react-hot-loader/babel'] 
     } 
     }, 

Answer 1

您的JSON嘗試ASING這

"scripts": { 
    "start": "webpack-dev-server --hot" 
    }, 

，並添加使用

nom install webpack-dev-server --hot 

01這種依賴性

然後啓動您的應用程序使用npm start