ES6打包CSS的方法？如何将require导入CSS改为ES6 import语法？

Hey there! Glad you're making the switch to ES6 imports—great move for modern React development. Let's break down your questions:

1. 替换require("./index.css")的ES6写法 #

其实很简单，直接把require换成import就行，不需要赋值给任何变量，因为CSS属于副作用模块，导入后就会自动生效：

import "./index.css";

这样导入后，打包工具会处理这个CSS文件，最终把样式注入到你的页面中。

2. ES6环境下打包CSS的常见方式 #

ES6本身并没有原生支持导入非JS文件（比如CSS），这个功能是靠打包工具扩展实现的，下面是两种主流方案：

Webpack 配置方式 #

Webpack需要借助loader来解析和处理CSS文件，常用的组合是：

• css-loader：负责解析CSS文件中的@import和url()等语法
• style-loader：把解析后的CSS注入到页面的<style>标签中（开发环境常用）
• mini-css-extract-plugin：生产环境下把CSS提取成单独的.css文件，优化加载性能

步骤示例：

1. 安装依赖：

npm install css-loader style-loader mini-css-extract-plugin --save-dev

2. 在webpack.config.js中配置规则：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          // 生产环境用MiniCssExtractPlugin.loader，开发环境用'style-loader'
          process.env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader : 'style-loader',
          'css-loader',
        ],
      },
    ],
  },
};

Vite 配置方式 #

Vite对CSS导入有原生支持，几乎不需要额外配置：

• 开发环境：自动把CSS注入到页面
• 生产环境：自动提取CSS为单独文件并做压缩优化

你只需要像前面那样直接import "./index.css"，Vite会帮你处理好一切，非常省心。

补充说明 #

不管用哪种工具，导入CSS的ES6语法都是一致的，不同的是打包工具背后的处理逻辑。这种方式在React、Vue等现代框架项目中已经成为标准做法，既保持了代码的模块化，又能让样式和组件紧密关联。

内容的提问来源于stack exchange，提问作者Katie Byers