Webpack可能需要适当的加载器来处理文件。加载程序不从导入加载CSS

Question

我的webpack配置文件无法从导入的文件中加载CSS。我已经看过人们在网上更新了加载器的测试正则表达式的几个问题，并添加了文件加载器和url加载器，但我仍然遇到同样的问题。好像Webpack（v3）不知道从我导入的任何文件加载css的位置或方式。我还应该注意，我最初使用create-react-app创建了这个应用程序，然后删除了node_modules并设置了我自己的自定义webpack配置和babel文件。

我得到的错误信息是： -

我的套餐JSON： - 基础是我已经安装了所有的css，sass和postcss，我可以在网上检查几个问题后加载。它是一个反应路由器V4的反应16应用程序。

      "devDependencies": {
    "babel": "^6.5.2",
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "babel-eslint": "^6.0.0",
    "babel-jest": "^21.2.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "codemirror": "^5.31.0",
    "css-loader": "^0.28.7",
    "eslint": "^2.5.1",
    "eslint-plugin-react": "^4.2.3",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^1.1.5",
    "font-awesome-loader": "^1.0.2",
    "html-webpack-plugin": "^2.30.1",
    "imports-loader": "^0.7.1",
    "jest": "^21.2.1",
    "jquery": "^3.2.1",
    "less-loader": "^4.0.5",
    "node-sass": "^4.7.2",
    "nodemon": "^1.9.1",
    "regenerator-runtime": "^0.11.1",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.19.0",
    "transfer-webpack-plugin": "^0.1.4",
    "url-loader": "^0.6.2",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.9.4"
  },

我的webpack配置文件。

var cssName = 'index.css';

const extractText =  new extractTextPlugin(cssName);


module.exports = {
  entry: ['./src/index.css', './src/index.js'],
  output: {
    path:  path.resolve('public'),
    filename: 'index_bundle.js'
  },
  plugins: [
    extractText,
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })
  ],

  module: {
    loaders: [
    {
      test: /\.css$/,  
      exclude: /node_modules/,  
      loader: ['style-loader', 'css-loader']
    },{
      test: /\.scss$/,
      loaders: ['style-loader', 'css-loader', 'sass-loader']
    },{ 
      test: /\.(png|woff|woff2|eot|ttf|svg|jpg|jpeg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
      loader: 'url-loader?limit=10000&mimetype=application/font-woff'
    },{
      test: /\.less$/,
      loader: 'style!css!less'
    },{ 
      test: /\.jsx?$/, 
      loader: 'babel-loader',
      exclude: /node_modules/,
      query: {
        cacheDirectory: true,
        presets:[ 'es2015', 'react', 'stage-2' ]
      }
    }]
  }
};

我的babelrc文件。

/ *     ./.babelrc * /

{
    "presets": ["react", ["es2015", { modules: false }]],
    "plugins": [
    "syntax-dynamic-import",
    ["transform-object-rest-spread", { "useBuiltIns": true }],
    "transform-decorators-legacy",
    "transform-class-properties",
  ],
}

Answer 1

您的css-loader个配置会排除node_modules所在的font_awesome.css：

{
  test: /\.css$/,  
  exclude: /node_modules/,  
  loader: ['style-loader', 'css-loader']
}

您可以使用include作为白名单：

{
  test: /\.css$/,  
  include: [ 
    path.resolve(__dirname, "your_src"),  
    path.resolve(__dirname, "node_modules/font-awesome")
  ]
  loader: ['style-loader', 'css-loader']
}