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

回答

相關問題