Vue中core应用组件引入plugins应用后自定义CSS不生效如何解决

根因分析 #

你直接跨项目引入.vue单文件组件时，plugins项目的默认vue-loader配置仅会处理当前项目目录内的文件，不会解析core项目中.vue文件的<style>块，导致scoped样式、scss变量都不会被编译提取到最终的样式文件中。bootstrap样式能正常生效是因为你在两个项目入口都单独引入了已编译完成的全局css文件，无需vue-loader额外处理；行内样式直接绑定在DOM元素上，不受样式编译逻辑影响，和你观察到的现象完全匹配。

解决方案 #

方案1：调整plugins项目的webpack配置（适合本地联调场景）

修改plugins项目的loader包含规则，让vue-loader和scss-loader同时处理core项目的组件目录：
如果是vue-cli生成的项目，修改vue.config.js：

const path = require('path')
module.exports = {
  chainWebpack: config => {
    // 让vue-loader处理core项目的vue文件
    config.module
      .rule('vue')
      .include.add(path.resolve(__dirname, '替换为core项目组件目录的实际绝对路径'))
      .end()
    // 让scss-loader处理core项目的scss样式
    config.module
      .rule('scss')
      .include.add(path.resolve(__dirname, '替换为core项目组件目录的实际绝对路径'))
      .end()
  }
}

修改后重启plugins项目的devServer即可生效。

方案2：将core组件打包为独立组件库（适合长期复用场景）

在core项目中将公共组件打包为UMD格式，同时抽离单独的css样式文件，之后plugins项目直接引入打包后的组件和css即可，无需修改webpack配置：

1. core项目配置webpack输出为UMD格式，开启样式抽离
2. 将打包后的产物通过npm本地link或者私有npm源的方式提供给plugins项目
3. plugins项目内直接引入组件和对应的css文件即可

快速验证方法

你可以先将core组件的样式临时拷贝到plugins项目的全局样式文件中，如果样式正常显示，即可确认根因是loader未处理跨项目的.vue文件样式。

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