Material 使用 React 和 Webpack 设计精简版

Question

我想从 Material Design Lite 压缩 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 配置文件 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

问题是您忽略了 node_modules 的样式和 css 加载 - css 文件位于 node_modules

Material 使用 React 和 Webpack 设计精简版

Material Design Lite with React and Webpack

css

reactjs

webpack

material-design-lite