導入CSS模塊插入的WebPack

Question

我試圖建立陣營-表，它依賴於一個樣式表需要導入的WebPack用下面的語句：

import ReactTable from 'react-table' 

不幸的是，我對配置Webpack不太熟悉，我不確定這條線應該放在哪裏。這裏是我的webpack.config.js文件：

const loaders = require('loaders'); 

module.exports = { 
    entry: [ 
    './src/index.js' 
    ], 
    output: { 
    path: __dirname, 
    publicPath: '/', 
    filename: 'bundle.js', 
    sourceMapFilename: "bundle.js.map" 
    }, 
    module: { 
     loaders: [ 
      loaders.css, 
      loaders.url, 
      { 
      exclude: /node_modules/, 
      loader: 'babel-loader', 
      query: { 
      presets: ['react', 'es2015', 'stage-1'] 
      } 
    }] 
    }, 
    resolve: { 
    extensions: ['*', '.js', '.jsx'] 
    }, 
    devServer: { 
    historyApiFallback: true, 
    contentBase: './' 
    } 
}; 

任何人都可以指向正確的方向嗎？

Answer 1

嘗試用這個更新的WebPack文件，如果你想安裝類似CSS-裝載機，網址裝載機，文件加載，風格裝載機，上海社會科學院，裝載機等

module.exports = { 
    entry: [ 
    './src/index.js' 
    ], 
    output: { 
    path: __dirname, 
    publicPath: '/', 
    filename: 'bundle.js', 
    sourceMapFilename: "bundle.js.map" 
    }, 
    module: { 
    loaders: [ 
    { 
     test: /\.jsx?$/, 
     exclude: /node_modules/, 
     loader: 'babel-loader', 
     query: { 
      presets: ['es2015', 'react'] 
     } 
    }, 
    { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }, 
    {test: /\.eot(\?v=\d+.\d+.\d+)?$/, loader: 'file-loader'}, 
    {test: /\.css$/, loader: "style-loader!css-loader" }, 
    {test: /\.scss$/, loaders: ['style-loader', 'css-loader', 'sass-loader']}, 

    ] 
    }, 
    resolve: { 
    extensions: ['*', '.js', '.jsx'] 
    }, 
    devServer: { 
    historyApiFallback: true, 
    contentBase: './' 
    } 
}; 

也都裝載機你的樣式表與webpack一起工作，看到應用中的變化，你可以把樣式表放到你的樣式文件夾中，並將它導入到你的入口文件中，比如src/index.js。就像這樣： -

import './styles/style.css' ;