Vue CLI5+Storybook：开发引入外部SCSS，生产构建组件库不包含的配置

环境信息 #

• Vue: ver 2.6
• Vue cli: ver 5
• CSS: Bulma SCSS

可以通过两种方式实现开发（Storybook）与生产构建流程的SCSS分离处理：

方法一：利用环境变量动态配置vue.config.js #

Vue CLI会自动根据构建命令设置NODE_ENV环境变量：生产构建时为production，Storybook开发启动时为development。基于此可以在vue.config.js里动态控制SCSS的注入：

module.exports = defineConfig({
  css: {
    extract: false,
    loaderOptions: {
      scss: {
        // 仅在开发模式下注入全局SCSS入口
        additionalData: process.env.NODE_ENV === 'development' ? `
          @import "~@/assets/scss/entry.scss";
        ` : '',
      },
    },
  },
})

执行生产构建命令vue-cli-service build --target lib --name my-ui-components ./src/index.ts时，不会注入SCSS，样式不会被打包进组件库；启动Storybook时则自动加载SCSS，正常预览组件样式。

方法二：单独为Storybook配置SCSS加载 #

如果不想依赖vue.config.js的环境判断，可以彻底移除全局SCSS注入，单独给Storybook配置样式加载：

1. 修改vue.config.js，移除SCSS相关的additionalData配置：

module.exports = defineConfig({
  css: {
    extract: false,
    // 移除scss loader的additionalData配置
  },
})

2. 配置Storybook加载SCSS，有两种方式可选：

方式A：直接在预览入口导入SCSS

在.storybook/preview.js中全局导入SCSS文件：

// .storybook/preview.js
import '@/assets/scss/entry.scss'

export const parameters = {
  // 你的Storybook参数配置
}

方式B：通过Webpack配置全局注入SCSS

如果需要全局注入变量、混合宏等（比如Bulma的基础变量），可以在.storybook/main.js中修改Webpack规则：

// .storybook/main.js
module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
  webpackFinal: async (config) => {
    // 找到SCSS对应的loader规则
    const scssRule = config.module.rules.find(rule => rule.test.test('.scss'))
    if (scssRule) {
      scssRule.use.forEach(loader => {
        if (loader.loader.includes('sass-loader')) {
          loader.options.additionalData = `
            @import "~@/assets/scss/entry.scss";
          `
        }
      })
    }
    return config
  },
}

两种方法都能实现：生产构建组件库时不打包SCSS，交给下游项目自行引入编译；Storybook开发阶段单独处理SCSS加载，满足组件预览需求。

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