Importieren eines CSS-Modul in Webpack

Question

Ich versuche, bis zu setzen React-Tabelle, die auf einem Stylesheet beruht, die in Webpack mit der folgenden Anweisung importiert werden muss:

import ReactTable from 'react-table' 

Leider bin ich nicht sehr vertraut mit der Konfiguration von Webpack und bin mir nicht sicher, wohin diese Zeile gehen soll. Hier ist meine webpack.config.js Datei:

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: './' 
    } 
}; 

Kann mir jemand in die richtige Richtung zeigen?

Answer 1

Versuchen Sie webpack Datei mit dieser Aktualisierung und installieren Sie alle Lader wie CSS-loader, URL-loader, Datei-loader, Stil-loader, sass Lader usw.

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: './' 
    } 
}; 

Auch wenn Sie machen wollen Ihr Stylesheet funktioniert mit webpack und Sie sehen diese Änderungen in der App. Sie können dieses Stylesheet in Ihren Styles-Ordner einfügen und es in Ihre Eingabedatei importieren, zB src/index.js. Etwas wie dieses: -

import './styles/style.css' ;