代码之家 › 专栏 › 技术社区 › Kijek

React和Webpack材质设计精简版

material-design-lite webpack reactjs css

Kijek · 技术社区 · 10 年前

我想压缩Material Design Lite中的CSS文件,但Webpack看不到材料。css文件,如果导入方式如下:

import 'material-design-lite';

但当我试图直接进口材料时。css如下:

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

那么我得到了:

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

这是我的Webpack conf文件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']
    },
}

有人知道我做错了什么吗?