代码之家 › 专栏 › 技术社区 › Sam

用于所有类型css代码的Webpack4 cssloader

webpack reactjs css

Sam · 技术社区 · 5 年前

在我添加的一个文件中

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

比例尺(1.2)

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加载器。

1 回复 | 直到 5 年前

Sam 5 年前

原来问题出在图像上。我的css引用了图像,但是我没有图像加载器。

安装后 file-loader 和 image-webpack-loader 具有

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

  {
    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;