Vue CLI 3构建lib模式组件时，如何排除共享样式？

Hey there! I’ve run into this exact scenario when building Vue component libraries with Vue CLI’s lib mode—let’s break down a few practical solutions to exclude those shared styles during production builds.

Solution 1: Conditionally Import Styles with Environment Variables #

The simplest approach is to only include shared styles during development, using Vue CLI’s built-in environment variables. This way, they won’t make it into your production library bundle.

In your component files, add a conditional style block that only loads when you’re in development mode:

<template>
  <!-- Your component markup -->
</template>

<script>
export default {
  name: 'ComponentName'
}
</script>

<style scoped>
/* Your component's unique styles here */
</style>

<!-- Only load shared styles in development -->
<style v-if="process.env.NODE_ENV === 'development'">
@import '../path/to/your/shared-styles.css';
</style>

When you run your vue-cli-service build --target lib command (which defaults to production mode), the conditional style block will be stripped out entirely, leaving no trace of the shared styles in your built library.

Solution 2: Tweak Webpack Config via vue.config.js #

If you prefer to keep import statements in your components but exclude specific files during lib builds, you can modify Vue CLI’s underlying Webpack configuration.

Create or update your vue.config.js file to target lib builds and exclude your shared styles:

const path = require('path');

module.exports = {
  chainWebpack: config => {
    // Check if we're building a library for production
    if (process.env.NODE_ENV === 'production' && process.env.VUE_CLI_BUILD_TARGET === 'lib') {
      // Exclude your shared styles file(s) from being processed
      config.module.rule('css')
        .exclude.add(path.resolve(__dirname, 'src/styles/shared-styles.css'))
        .end();
      
      // If using SCSS/SASS, add the same rule for those loaders too
      config.module.rule('scss')
        .exclude.add(path.resolve(__dirname, 'src/styles/shared-styles.scss'))
        .end();
    }
  }
};

This tells Webpack to skip processing your shared styles file when building the production library. Just adjust the file paths to match your project’s structure.

Solution 3: Alias-Based Conditional Import #

Another flexible option is to use Webpack aliases to swap out the shared styles file during production builds.

First, create an empty CSS file (e.g., empty.css in your project root) that will act as a placeholder. Then update vue.config.js:

const path = require('path');

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        // Point to real shared styles in dev, empty file in lib production builds
        '@shared-styles': (process.env.NODE_ENV === 'production' && process.env.VUE_CLI_BUILD_TARGET === 'lib')
          ? path.resolve(__dirname, 'empty.css')
          : path.resolve(__dirname, 'src/styles/shared-styles.css')
      }
    }
  }
};

Now in your components, import the shared styles using the alias:

<style>
@import '~@shared-styles';
</style>

During development, this loads your real shared styles; during lib production builds, it loads the empty file, adding no extra CSS to your bundle.

Important Note #

Make sure the host websites where you’ll use these components already include the shared styles globally! If not, your components will lose the styles they depend on. Always test the built library in a real host environment to confirm styles work as expected.

内容的提问来源于stack exchange，提问作者Kim Boender