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 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

问题是您忽略了<input type="date" /> <template> <select> <option value="1999">1999</option> <option value="2000">2000</option> </select> </template>的样式和css加载 - 而且css文件位于node_modules

具有React和Webpack的Material Design Lite

1 个答案: