How to include CSS from node_modules in Vite in production?

Properly including CSS files from node_modules in production environments is a crucial step for modern frontend build tools like Vite, ensuring that all third-party styles are correctly loaded and applied. Below are the steps and examples on how to do this.

Step 1: Install and Configure Vite

First, confirm that Vite is correctly installed in your project. If not installed, you can install it using npm or yarn:

bash
npm init vite@latest my-vue-app --template vue
cd my-vue-app
npm install

Step 2: Import CSS Files

In a Vite project, you can directly import CSS files from node_modules into your JavaScript or Vue files. Vite handles the parsing and bundling of these files. For example, if you want to use Bootstrap, first install Bootstrap:

bash
npm install bootstrap

Then, in your main.js or any component, directly import Bootstrap's CSS file:

javascript
import 'bootstrap/dist/css/bootstrap.min.css';

Step 3: Ensure Vite Configuration is Correct

In the Vite configuration file vite.config.js, ensure appropriate configuration for optimizing CSS processing. Vite defaults to supporting CSS imports, so additional configuration is typically not needed. However, depending on your project's specific needs, you may need to adjust some configurations, such as setting up PostCSS plugins:

javascript
export default defineConfig({
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      // Configure preprocessor options
    }
  }
})

Step 4: Build and Test

After development is complete, run Vite's build command to generate production files:

bash
npm run build

After building, test the production files to ensure CSS is correctly loaded and displayed. You can view the production environment effects by starting a simple server:

bash
npm run preview

Example

Assuming your project uses Ant Design Vue, here are the steps to import Ant Design's styles into your project:

1. Install Ant Design Vue:

   bash
   npm install ant-design-vue

2. In your entry file (e.g., main.js), import Ant Design's CSS:

   javascript
   import 'ant-design-vue/dist/antd.css';

These steps ensure that all CSS files imported from node_modules are properly handled and included in the build output for production environments, ensuring that third-party library styles are correctly applied and enhancing user experience.