解决webpack打包css时CssSyntaxError的问题

最新推荐文章于 2025-09-18 09:46:53 发布

原创最新推荐文章于 2025-09-18 09:46:53 发布 · 7.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #CssSyntaxError #打包问题

前端学习同时被 2 个专栏收录

49 篇文章

订阅专栏

HTML

16 篇文章

订阅专栏

本文介绍在使用Webpack打包CSS文件时，如何正确配置style-loader和css-loader以避免CssSyntaxError问题。详细解释了loader顺序的重要性，并提供了正确的配置示例。

打包CSS文件时的CssSyntaxError问题

// 可以使用的代码
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
};