Question

我试图设置React-Table，它依赖于需要使用以下语句导入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-loader，url-loader，file-loader，style-loader，sass-loader等。

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一起工作并在app中看到这些变化，你可以将样式表放在你的样式文件夹中，然后将它导入你的条目文件，即src / index.js。这样的事情： -

 import './styles/style.css' ;

将css模块导入Webpack

1 个答案: