如何使用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？

回答

相關問題