react-icheck：css-loader失败，错误：找不到模块：错误：无法解析'minimal/[email protected]'

我试图使用这个前端库react-icheck（icheck.js的一个端口jQuery插件进入反应）到我的反应应用程序的安装与2的WebPack这是我的错误，当我运行NPM启动：react-icheck：css-loader失败，错误：找不到模块：错误：无法解析'minimal/[email protected]'

Module not found: Error: Can't resolve 'minimal/[email protected]' in '_my_project_directory_\node_modules\icheck\skins'.

这是我的方式导入I检查部件在我的文件之一：

require('icheck/skins/all.css'); 
import {Checkbox, Radio} from 'react-icheck';

minimal/[email protected]是中引用的图像文件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' 
    } 
};

来源

2017-05-30 TheSoul

这是我刚刚在github上的css-loader的主页中读到的：除了相对路径有问题，还需要使用包含服务器URL的绝对公共路径。看起来这是他们的错误。这是否意味着我应该浏览node_modules中的所有.css文件，并将任何相对路径引用为绝对路径？ – TheSoul

我解决它终于通过其他装载机决心，网址装载机，然后通过要求这样我的风格文件：

require('!css-loader!resolve-url-loader!icheck/skins/all.css');

来源

2017-05-30 08:26:47 TheSoul

react-icheck：css-loader失败，错误：找不到模块：错误：无法解析'minimal/[email protected]'

回答

相关问题