Reccomended way to require CSS in webpack?

[drobtravels]

What is the recommended way to bring in the CSS from this packaged in webpack?

Just doing require('react-select') appears to only bring in the javascript. I was able to get it working by adding require('react-select/less/default.less') or require('react-select/dist/default.css') to my javascript file.

I'm new to node packages so I'm not clear if that is by design or not.

[barsukov]

I use the same way...

[evandegr]

@droberts84 can you show your webpack config

[drobtravels]

See below. Is require('react-select/dist/default.css') not necessary? I looked at package.json and the JS files it references, and didn't see any references to the CSS.

var path = require('path');
var webpack = require('webpack');
var rootPath = path.join(__dirname, '../', '../');

var config = module.exports = {
  // the base path which will be used to resolve entry points
  context: path.join(rootPath, 'frontend'),
  // the main entry point for our application's frontend JS
  entry: './javascripts/bootstrap-app',
};

config.output = {
  // this is our app/assets/javascripts directory, which is part of the Sprockets pipeline
  path: path.join(rootPath, 'app', 'assets', 'javascripts'),
  // the filename of the compiled bundle, e.g. app/assets/javascripts/bundle.js
  filename: 'bundle.js',
  // if the webpack code-splitting feature is enabled, this is the path it'll use to download bundles
  publicPath: '/assets',
  // this all related to source maps
  devtoolModuleFilenameTemplate: '[resourcePath]',
  devtoolFallbackModuleFilenameTemplate: '[resourcePath]?[hash]',
};

config.resolve = {
  // tell webpack which extensions to auto search when it resolves modules. With this,
  // you'll be able to do `require('./utils')` instead of `require('./utils.js')`
  extensions: ['', '.js', '.coffee', '.js.coffee', '.jsx'],
  root: rootPath,
  modulesDirectories: ['node_modules'],
  alias: {
    app: path.join(rootPath, 'frontend', 'javascripts'),
    components: path.join(rootPath, 'frontend', 'javascripts', 'components'),
    flux: path.join(rootPath, 'frontend', 'javascripts', 'flux'),
  }
};

config.resolveLoader = {
  root: path.join(rootPath, "node_modules")
};

config.plugins = [

];

// use jQuery from the rails gem
config.externals = {
  jquery: 'var jQuery'
};

config.module = {
  loaders: [
    { test: /\.coffee$/, loader: 'coffee-loader' },
    { test: /\.es6$/, loader: 'babel-loader' },
    { test: /\.jsx$/, loader: 'babel-loader'},
    // handle stylesheets required from node packages
    { test: /\.css$/, loader: 'style-loader!css-loader'},
    // need to load all react-infinte modules via babel since it contains es6
    { test: /\.js$/, include: path.join(rootPath, 'node_modules', 'react-infinite'), loader: 'babel-loader' },
    // expose flux instance globally as $flux... must use coffe-loader if coffee-script
    { test: path.join(rootPath, 'frontend', 'javascripts', 'flux'), loader: 'expose?$flux!coffee-loader'},
  ],
};

[GabeMedrash]

This should really be included in the documentation.

[Agamennon]

my less-loader is failing @import my config has

        {
            test: /\.less$/,
           loader: 'style!css!less'
       }

how exactly should we import this with webpack?

[GuruM]

+1 styles not appearing for me without manual require as well

[ptim]

👍 thanks for the tip @droberts84

[sample-usr]

Still no proper way to require the CSS. @JedWatson should we separate the CSS entirely and leave it to the user however they want to style it?

[tsheaff]

I agree that this is not clear from the documentation and should be more explicit.

[NeXTs]

+1
Had to look for issues to figure out best practices of including CSS, that's how I ended up here. Not obvious.

[jonpincus]

+1. Not a great initial experience!

[seeya]

I'm using webpack too and I tried doing import 'react-select/scss/default.scss'; however the styles are not getting loaded. Am I missing something?

[felipeleusin]

For me it fixed doing import 'style!react-select/scss/default.scss'

[josephtactica]

This one worked for me:
require('style!css!sass!react-select/scss/default.scss');