Reactjs 热加载 css 文件

Question

我用react-hot-boilerplate 开始了新项目。在我尝试将 css 文件添加到 index.html 之前，一切正常。

<Link href="/style/main.css" rel="stylesheet">

Hot-loader 不读取 css 文件。经过一番研究，我发现 server.js 中的这一行将所有请求重定向到 index.html

   app.get('*', function(req, res) {
       res.sendFile(path.join(__dirname, 'index.html'));
    });

我改成

app.get('/', function(req, res) {
  res.sendFile(path.join(__dirname, 'index.html'));
});
app.get('/style/main.css', function(req, res) {
    res.sendFile(path.join(__dirname, 'style/main.css'));
});

它奏效了。有没有更好的方法来做到这一点？我需要映射我 servere.js 的所有资源吗？ 我不想在 webpack 中使用 style-loader 或 css-loader，因为我得到了很多错误，我不能简单地使用 className="myCustomStyle"。

var path = require('path');
var webpack = require('webpack');
var packageJSON = require('./package.json');
const PATHS = {
    build: path.join(__dirname, 'target', 'classes', 'META-INF', 'resources', 'webjars', packageJSON.name, packageJSON.version)
};
module.exports = {
    devtool: 'cheap-module-source-map',
    resolve: {
        extensions: ['', '.js', '.jsx', '.scss'],
        alias: {
            config: path.join(__dirname, 'src/config/dev.js'),
        },
    },
    entry: [
        'webpack-hot-middleware/client',
        './src/index'
    ],
    output: {
        path: PATHS.build,
        filename: 'app-bundle.js',
        publicPath: '/static/'
    },
    plugins: [

        new webpack.HotModuleReplacementPlugin()
    ],
    module: {
        loaders: [{
            test: /\.js$/,
            loaders: ['react-hot', 'babel'],
            include: path.join(__dirname, 'src')
        }, {
            test: /\.css$/,
            loader: 'style-loader!css-loader?modules=true&localIdentName=[name]__[local]___[hash:base64:5]'
        }]
    }
};

Answer 1

加载静态文件不应在服务器端处理。因此，您不应该在服务器中插入样式或 js 文件，否则加载时间会更长，而且由于您使用的是 react，所以您的所有文件都是 js，所以如果您编写要在服务器上发送的资源，那么它就没有用了。所以最好的选择是在 webpack 中编写加载器。

module: {
 loaders: [
  {
    test: /\.jsx?$/,
    loader: 'babel',
    exclude: /(node_modules|bower_components)/
  },
  {
    test: /\.css$/,
    loader: 'style-loader!css-loader'
  },
  {
    test: /\.scss$/,
    loaders: ["style", "css", "sass"]
  },
  {
    test: /\.json$/,
    loader: 'json' 
  },
  {
      test: /\.(png|jpg)$/, 
      loader: 'file-loader'
  }
]
}

Answer 2

如果你想做类似的事情

<div className={styles.app}>

那么你的组件应该是这样的

export default class Mycomponent extends Component{
let styles = {
  app:{
    'color': 'red',
  }
}
return(){
  render(
   <div className={styles.app}>
  )
 }
}

这会解决你的问题