引用css时var footerCss = require("../../css/footer.css");运行报错You may need an appropriate loader to handle this file type.
webpack.config.js配置如下
var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');
module.exports = {
context: path.join(__dirname),
devtool: debug ? "inline-sourcemap" : null,
entry: "./src/js/index.js",
module: {
loaders: [
{
test: /\.js?$/,
exclude: /(node_modules)/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015'],
plugins: ['react-html-attrs'], //添加组件的插件配置
}
},
//下面是添加的 css 的 loader,也即是 css 模块化的配置方法,大家可以拷贝过去直接使用
{
test: /\.css$/,
loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
},
]
},
output: {
path: __dirname,
filename: "./src/bundle.js"
},
plugins: debug ? [] : [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
],
};
package.json文件已经安装了style-loader,和css-loader 模块。全局-g重新安装一遍后,webpack报错
ERROR in ./src/js/components/footer.js
Module not found: Error: Can't resolve 'style' in '/Users/mac/source/9-01'
BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix when using loaders.
You need to specify 'style-loader' instead of 'style',
see https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed
@ ./src/js/components/footer.js 25:16-47
@ ./src/js/index.js
大意猜测某部分少了-loader,于是在webpack.config .js文件中style改为style-loader
loader: 'style-loader!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
运行webpack成功