CODEWITHSUNDEEP
cssreactjswebpackmaterial-design-lite
Kijek
Kijek

Reputation: 13

Material Design Lite with React and Webpack

I want to compress CSS file from Material Design Lite, but Webpack doesn't see material.css file if I import it like this:

import 'material-design-lite';

But when I tried to import directly material.css like this:

import 'material-design-lite/material.css';

then I've got:

ERROR in ./~/material-design-lite/material.css
Module parse failed: /p/prod/node_modules/material-design-lite/material.css Unexpected character '@' (8:0)

Here is my Webpack conf file webpack.base.js:

var path = require("path")
var webpack = require('webpack')
var BundleTracker = require('webpack-bundle-tracker')
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var cssPath = path.join(__dirname, 'assets/css');

module.exports = {
    context: __dirname,

    entry: './assets/js/index',

    output: {
        path: path.resolve('./assets/bundles/'),
        filename: "[name]-[hash].js"
    },

    plugins: [
        new ExtractTextPlugin("[name]-[hash].css")
    ],

    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loaders: ['react-hot', 'babel?presets[]=react,presets[]=es2015,presets[]=stage-0'],
            }, {
                test: /\.css$/,
                exclude: /node_modules/,
                loader: ExtractTextPlugin.extract("style-loader", "css-loader")
            }
        ],
    },

    resolve: {
        modulesDirectories: ['node_modules', cssPath],
        extensions: ['', '.js', '.jsx', '.css']
    },
}

Anyone has an idea what I did wrong?

Upvotes: 1

Views: 1432

Answers (1)

Marty
Marty

Reputation: 2963

The problem is that you are ignoring node_modules for your style and css loading - and the css file is in node_modules

Upvotes: 1

Related Questions