如何使用webpack编译和加载ReactJS中的纯CSS？

我正在使用一个简单的基于CSS的模板用于带有webpack模块的ReactJS应用程序，并且无法在编译后连接CSS。如何使用webpack编译和加载ReactJS中的纯CSS？

我的WebPack配置看起来像这样...

var rucksack = require('rucksack-css') 
 
var webpack = require('webpack') 
 
var path = require('path') 
 

 
module.exports = { 
 
    context: path.join(__dirname, './src'), 
 
    entry: { 
 
    css : './public/assets/css/main.css', 
 
    jsx: './index.js', 
 
    html: './public/index.html', 
 
    vendor: [ 
 
     'react', 
 
     'react-dom', 
 
     'react-redux', 
 
     'react-router', 
 
     'react-router-redux', 
 
     'redux' 
 
    ] 
 
    }, 
 
    output: { 
 
    path: path.join(__dirname, './static'), 
 
    filename: 'bundle.js', 
 
    }, 
 
    module: { 
 
    loaders: [ 
 
     { 
 
     test: /\.html$/, 
 
     loader: 'file?name=[name].[ext]' 
 
     }, 
 
     { 
 
     test: /\.css$/, 
 
     include: /src/, 
 
     loaders: [ 
 
      'style-loader', 
 
      'css-loader?modules&sourceMap&importLoaders=1&localIdentName=[local]___[hash:base64:5]', 
 
      'postcss-loader' 
 
     ] 
 
     }, 
 
     { 
 
     test: /\.css$/, 
 
     exclude: /src/, 
 
     loader: 'style!css' 
 
     }, 
 
     { 
 
     test: /\.(js|jsx)$/, 
 
     exclude: /node_modules/, 
 
     loaders: [ 
 
      'react-hot', 
 
      'babel-loader' 
 
     ] 
 
     }, 
 
    ], 
 
    }, 
 
    resolve: { 
 
    extensions: ['', '.js', '.jsx'] 
 
    }, 
 
    postcss: [ 
 
    rucksack({ 
 
     autoprefixer: true 
 
    }) 
 
    ], 
 
    plugins: [ 
 

 
    new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js'), 
 
    new webpack.DefinePlugin({ 
 
     'process.env': { NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development') } 
 
    }) 
 
    ], 
 
    devServer: { 
 
    contentBase: './src', 
 
    hot: true 
 
    } 
 
}

和我的CSS文件的相对路径是 'SRC /公/资产/ CSS/main.css的'。有没有什么办法可以使用纯粹的传统CSS，而不必将其改变为基于CSS的JS-in反应？

来源

2017-07-07 Mohit

我把CSS作为seprate的事情，我使用一饮而尽或咕噜使事情easyer然后包括文件作为基本HTML

来源

2017-07-07 18:06:37

我可以同时使用gulp和webpack，或者不得不与构建的版本一起使用吗？ – Mohit

是的，但他们将分开，所以建设CSS将使用吞咽和建立反应将使用网络包 –

您可以使用extract-text-webpack-plugin拉你的CSS出你的JS文件。我相信一般的最佳实践是在开发中使用'CSS-in-JS'（正如你所提到的那样），以便从热重载中受益。然后使用上面的插件来构建生产。

此外，它似乎好像你的配置文件有一些冗余。

{ 
    test: /\.css$/, 
    include: /src/, 
    loaders: [ 
     'style-loader', 
     'css-loader?modules&sourceMap&importLoaders=1&localIdentName=[local]___[hash:base64:5]', 
     'postcss-loader' 
    ] 
    }, 
    { 
    test: /\.css$/, // <--- this test seems redunant. Perhaps remove it. 
    exclude: /src/, 
    loader: 'style!css' 
    },

来源

2017-07-07 20:54:12 Chanzi

如何使用webpack编译和加载ReactJS中的纯CSS？

回答

相关问题