css - 适用于所有类型的 css 代码的 Webpack 4 css 加载器

Question

我在我的 webpack 配置文件中添加了一个 cssloader，这样我就可以使用 webpack 在我的 es6 代码中导入我的 css 文件。

在我添加的一个文件中

import '../css/Fonts.css'

它没有任何问题。

然后我尝试导入其余的 CSS，但无法导入。加载程序似乎只能加载一些 css。不是全部。

这是我收到的错误

ERROR in ./css/main.css (./node_modules/css-loader/dist/cjs.js!./css/main.css)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
CssSyntaxError

(26:2) Unknown word

  24 |  background-position: center top;
  25 |  background-size: cover;
> 26 |  scale(1.2);
     |  ^
  27 |  flex-grow: 2;
  28 |  bottom: 0;

 @ ./css/main.css 2:14-79
 @ ./es6/Pages.js
 @ ./src/index.js

ERROR in ./images/myPhoto.jpg 1:0
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
 @ ./css/Components/Header.css (./node_modules/css-loader/dist/cjs.js!./css/Components/Header.css) 4:38-69
 @ ./css/Components/Header.css
 @ ./es6/Pages.js
 @ ./src/index.js

我继续删除导致错误的 css 行，看看下一个不起作用的是什么。

规模(1.2)

这是我的 webpack.config.js

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackTemplate = require('html-webpack-template');
const path = require('path');

const config = {
  mode: 'development',     // set mode option, 'development' or 'production'
  entry: {
    index: './src/index.js',
    contact:'./src/contact.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: "[name].js",
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ],
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html',
      inject: true,
      chunks: ['index'],
      filename: './index.html'
    }),
  new HtmlWebpackPlugin({
    template: './contact.html',
    inject: true,
    chunks: ['contact'],
    filename: './contact.html'
})
  ]
};

module.exports = config;

我想要一个可以加载所有 css 的 css 加载器。

Answer 1

事实证明问题出在图片上。我的 css 引用了图像，但我没有图像加载器。

安装file-loader 和image-webpack-loader 之后

npm install image-webpack-loader --save
npm install file-loader --save

我通过将此规则添加到我的 webpack 配置中添加了一个

  {
    test: /\.(gif|png|jpe?g|svg)$/i,
    use: [
      'file-loader',
      {
        loader: 'image-webpack-loader',
        options: {
          bypassOnDebug: true, // webpack@1.x
          disable: true, // webpack@2.x and newer
        },
      },
    ],
  }

这是我完整的 webpack.config.js

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackTemplate = require('html-webpack-template');
const path = require('path');

const config = {
  mode: 'development',     // set mode option, 'development' or 'production'
  entry: {
    index: './src/index.js',
    publications: './src/publications.js',
    advertise:'./src/advertise.js',
    contact:'./src/contact.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: "[name].js",
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(gif|png|jpe?g|svg)$/i,
        use: [
          'file-loader',
          {
            loader: 'image-webpack-loader',
            options: {
              bypassOnDebug: true, // webpack@1.x
              disable: true, // webpack@2.x and newer
            },
          },
        ],
      }
    ],
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html',
      inject: true,
      chunks: ['index'],
      filename: './index.html'
    }),
    new HtmlWebpackPlugin({
        template: './advertise.html',
        inject: true,
        chunks: ['advertise'],
        filename: './advertise.html'
    }),
    new HtmlWebpackPlugin({
      template: './publications.html',
      inject: true,
      chunks: ['publications'],
      filename: './publications.html'
  }),
  new HtmlWebpackPlugin({
    template: './contact.html',
    inject: true,
    chunks: ['contact'],
    filename: './contact.html'
})
  ]
};

module.exports = config;