导入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' ;