Importing a css module into Webpack

Question

I'm trying to set up React-Table, which relies on a style sheet that needs to be imported into Webpack with the following statement:

import ReactTable from 'react-table'

Unfortunately, I'm not very familiar with configuring Webpack and am not sure where this line should go. Here's my webpack.config.js file:

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

Can anyone point me in the right direction?

Never mind. Why would you want to use something that is deprecated. — Siya Mzam
– Siya Mzam, Commented Dec 3, 2017 at 16:13
What version of webpack? Does this help - webpack.js.org/guides/asset-management/#loading-css — olore
– olore, Commented Dec 3, 2017 at 17:50
@olore I'm running Webpack 3.8.1. Yes, that link explains it. Do you want to add it as an answer (with the relevant text, in case the link changes later) and I will accept? — Boris K
– Boris K, Commented Dec 4, 2017 at 7:05

Shivani · Accepted Answer · 2017-12-04 11:28:21Z

Try updating your webpack file with this and install all loaders like css-loader, url-loader, file-loader, style-loader, sass-loader etc.

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

Also if you want to make your stylesheet work with webpack and see those changes in app, you can put that stylesheet in your styles folder and import it in your entry file i.e src/index.js. Something like this :-

 import './styles/style.css' ;

Collectives™ on Stack Overflow

Importing a css module into Webpack

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest