Cannot get SpinKit to work even with webpack configured

[ynnelson]

var HTMLWebpackPlugin = require('html-webpack-plugin');
var CleanWebpackPlugin = require('clean-webpack-plugin'); //Cleans out the /buil folder on every build
var Webpack = require('webpack'); // Necessary for Hot Modules Replacement
var combineLoaders = require('webpack-combine-loaders');//Combiine loader queries for the same file types
var UglifyJsPlugin = require('uglifyjs-webpack-plugin');

//var ExtractTextPlugin = require('extract-text-webpack-plugin'); //CSS Loader

var HTMLWebpackPluginConfig = new HTMLWebpackPlugin({
  template: __dirname + '/app/index.html',
  filename: 'index.html',
  inject: 'body'
});

var CleanWebpackPluginConfig = new CleanWebpackPlugin(['build']);
var WebpackNamedModulesConfig = new Webpack.NamedModulesPlugin();
var WebPackHMR = new Webpack.HotModuleReplacementPlugin();
var buildType = new Webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
    });
//var Uglify = new UglifyJsPlugin();

//var ExtractTextPluginConfig = new ExtractTextPlugin("styles.css");

module.exports = {
  entry: ['babel-polyfill','react-hot-loader/patch', __dirname + '/app/index.js'],
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
      {
        test: /\.css$/,
        loader: combineLoaders([
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader',
            query:
            {
              modules: true,
              localIdentName: '[name]__[local]___[hash:base64:5]'
            }
          },
          {
              loader: 'postcss-loader'
          }
        ])
      },
      {
        //test: /\.(eot|woff|woff2|svg|ttf)([\?]?.*)$/,
        //loader: "file-loader"
        test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
         use: [{
           loader: 'file-loader',
           options: {
             name: '[name].[ext]',
             outputPath: 'fonts/'/*,    // where the fonts will go
             publicPath: '/resource/abacus/' */      // override the default path
           }
         }]
      }
    ]
  },
  devtool: 'inline-source-map',
  devServer: {
    contentBase: __dirname + '/build',
    hot: true,
    overlay:true
  },
  output: {
    filename: 'transformed.js',
    path: __dirname + '/build'
  },
  plugins:[buildType,CleanWebpackPluginConfig,HTMLWebpackPluginConfig,WebpackNamedModulesConfig,WebPackHMR]//,ExtractTextPluginConfig
};

This is my webpack config and with this Spinkit does not show up! What am I missing?

[JayCanuck]

It appears spinkit just requires the css files, and expects the classnames unchanged and on a global scope. In order for it to work right now, the modules feature needs to be disabled by setting modules: false.

In the future, would be awesome to see an update that uses the returned classname mapping within the js, to dynamically attach css classes. Though that might be too webpack-specific for the dev's goals of brother browserify + webpack support.

[pczern]

It's easy to use with CSS Modules.
In webpack there's the feature to exclude and include paths for Loaders.
So you just include only files in src for your CSS Loader which activates modules. This way it won't transform classnames from node_modules
An other global CSS Loader just doesn't parse files in src (using exclude). This loader applies the classnames exact as they were.

So you get something like this:

 {
            test: [/\.css$/],
            exclude: [paths.appSrc],
            use: [
              require.resolve('style-loader'),

              {
                loader: require.resolve('css-loader'),
                options: {
                  importLoaders: 1,
                },
              },
              {
                loader: require.resolve('postcss-loader'),
                options: {
                  // Necessary for external CSS imports to work
                  // https://github.com/facebookincubator/create-react-app/issues/2677
                  ident: 'postcss',
                  plugins: () => [
                    require('postcss-flexbugs-fixes'),
                    autoprefixer({
                      browsers: [
                        '>1%',
                        'last 4 versions',
                        'Firefox ESR',
                        'not ie < 9', // React doesn't support IE8 anyway
                      ],
                      flexbox: 'no-2009',
                    }),
                  ],
                },
              },
            ],
          },
          // "postcss" loader applies autoprefixer to our CSS.
          // "css" loader resolves paths in CSS and adds assets as dependencies.
          // "style" loader turns CSS into JS modules that inject <style> tags.
          // In production, we use a plugin to extract that CSS to a file, but
          // in development "style" loader enables hot editing of CSS.
          {
            test: [/\.css$/, /\.scss$/],
            include: [paths.appSrc],
            use: [
              require.resolve('style-loader'),

              {
                loader: require.resolve('css-loader'),
                options: {
                  importLoaders: 1,
                  modules: true,
                  sourceMap: true,
                  import: false,
                  localIdentName: '[path]___[name]__[local]___[hash:base64:5]',
                },
              },
              {
                loader: require.resolve('postcss-loader'),
                options: {
                  // Necessary for external CSS imports to work
                  // https://github.com/facebookincubator/create-react-app/issues/2677
                  ident: 'postcss',
                  plugins: () => [
                    require('postcss-flexbugs-fixes'),
                    autoprefixer({
                      browsers: [
                        '>1%',
                        'last 4 versions',
                        'Firefox ESR',
                        'not ie < 9', // React doesn't support IE8 anyway
                      ],
                      flexbox: 'no-2009',
                    }),
                  ],
                },
              },
              {
                loader: require.resolve('sass-loader'),
              },
            ],
          },