我正在尝试使用这个前端库react-icheck (icheck.js jquery插件的一个端口进行反应)进入我的webpack 2的应用程序设置。这是我得到的错误运行 npm start :
Module not found: Error: Can't resolve 'minimal/minimal@2x.png' in '_my_project_directory_\node_modules\icheck\skins'.
这是我在我的一个文件中导入icheck组件的方式:
require('icheck/skins/all.css');
import {Checkbox, Radio} from 'react-icheck';
minimal/minimal@2x.png 是我正在导入的 all.css 中引用的图片文件。 (相对路径)
我在互联网上做了一些研究,发现当路径是相对的时,似乎css-loader和postcss-loader会中断。有人能指出我如何解决这个问题的正确方向吗?在这里我转储了我的webpack文件的内容:
var webpack = require('webpack');
var path = require('path');
var resolve = path.resolve;
// variables
var isProduction = process.argv.indexOf('-p') >= 0;
var sourcePath = path.join(__dirname, './src');
var outPath = path.join(__dirname, './dist');
// plugins
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
context: sourcePath,
entry: {
main: './index.tsx',
vendor: [
'react',
'react-dom',
'react-redux',
'react-router',
'redux'
]
},
output: {
path: outPath,
publicPath: '/',
filename: 'bundle.js',
},
devtool: 'inline-source-map',
target: 'web',
resolve: {
extensions: ['.js', '.ts', '.tsx'],
// Fix webpack's default behavior to not load packages with jsnext:main module
// https://github.com/Microsoft/TypeScript/issues/11677
mainFields: ['main']
},
module: {
loaders: [
// .ts, .tsx
{
test: /\.tsx?$/,
use: isProduction
? 'awesome-typescript-loader?module=es6'
: [
//'react-hot-loader',
'awesome-typescript-loader'
]
},
// .jsx
{
test: /\.js$/,
loaders: ['react-hot-loader', 'babel-loader'],
include: sourcePath
},
// css
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
query: {
modules: true,
sourceMap: !isProduction,
importLoaders: 1,
localIdentName: '[local]__[hash:base64:5]'
}
},
{
loader: 'postcss-loader'
}
]
})
},
// static assets
{ test: /\.html$/, use: 'html-loader' },
{ test: /\.png$/, use: 'url-loader?limit=10000' },
{ test: /\.jpg$/, use: 'file-loader' },
],
},
plugins: [
new webpack.LoaderOptionsPlugin({
options: {
context: sourcePath,
postcss: [
require('postcss-import')({ addDependencyTo: webpack }),
require('postcss-url')(),
require('postcss-cssnext')(),
require('postcss-reporter')(),
require('postcss-browser-reporter')({ disabled: isProduction }),
]
}
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
filename: 'vendor.bundle.js',
minChunks: Infinity
}),
new webpack.optimize.AggressiveMergingPlugin(),
new ExtractTextPlugin({
filename: 'styles.css',
disable: !isProduction
}),
new HtmlWebpackPlugin({
template: 'index.html'
})
],
devServer: {
contentBase: sourcePath,
hot: true,
stats: {
warnings: false
},
},
node: {
// workaround for webpack-dev-server issue
// https://github.com/webpack/webpack-dev-server/issues/60#issuecomment-103411179
fs: 'empty',
net: 'empty'
}
};
答案 0 :(得分:0)
我最后通过使用另一个加载器 resolve-url-loader 解决了这个问题,然后以这种方式要求我的样式文件:
require('!css-loader!resolve-url-loader!icheck/skins/all.css');