Webpack 可能需要适当的加载器来处理文件。装载机未从进口装载 CSS

Question

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

我收到的错误消息是：-

我的包裹JSON:- 基本情况是我已经安装了所有 css、sass 和 postcss 加载程序，我可以在网上检查几个问题后安装。它是一个带有 React Router V4 的 React 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']
}

Webpack 可能需要适当的加载器来处理文件。装载机未从进口装载 CSS

Webpack may need appropriate loaders to handle file. Loaders not loading CSS from imports

import

reactjs

webpack

webpack-dev-server

css-loader