材料设计中的反应与Webpack

Question

我想从material.css压缩CSS文件，但是Webpack没有看到material.css文件，如果我像这样导入它：

import 'material-design-lite';

但是当我试图像这样直接导入material.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']
    },
}

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

Answer 1

问题是您忽略了样式和css加载的node_modules，并且css文件位于node_modules中。