0

react-hot-boilerplateで新しいプロジェクトを開始しました。cssファイルをindex.htmlに追加しようとするまで、すべてうまくいきました。

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

ホットローダーは 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 のすべてのリソースをマップする必要がありますか? 多くのエラーが発生し、単純に className="myCustomStyle" を使用できないため、webpack で style-loader または css-loader を使用したくありません。

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]'
        }]
    }
};
4

2 に答える 2

0

次のようなことをしたい場合

<div className={styles.app}>

次に、コンポーネントは次のようになります

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

これで問題が解決します

于 2016-12-14T13:46:01.647 に答える
0

静的ファイルのロードは、サーバー側で処理しないでください。したがって、サーバーにスタイリングまたは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'
  }
]
}
于 2016-12-14T09:06:42.933 に答える