Cannot convert deep syntax in Vue

[luoriwusheng-xia]

Basic environment

【zh-cn】基础环境

pnpm @8.10.2

[email protected]

[email protected]
vue-template-compiler @2.7.16
"postcss": "^8.4.33",
"rollup": "^4.9.2",
"rollup-plugin-postcss": "^4.0.2",

demo vue file
【zh-cn】示例vue文件

<template>
  <div>
    你好
    <div>
      <el-button  class='test-btn'>点我</el-button>
    </div>


    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
  <el-menu-item index="1">处理中心</el-menu-item>
  <el-submenu index="2">
    <template slot="title">我的工作台</template>
    <el-menu-item index="2-1">选项1</el-menu-item>
    <el-menu-item index="2-2">选项2</el-menu-item>
    <el-menu-item index="2-3">选项3</el-menu-item>
    <el-submenu index="2-4">
      <template slot="title">选项4</template>
      <el-menu-item index="2-4-1">选项1</el-menu-item>
      <el-menu-item index="2-4-2">选项2</el-menu-item>
      <el-menu-item index="2-4-3">选项3</el-menu-item>
    </el-submenu>
  </el-submenu>
  <el-menu-item index="3" >消息中心</el-menu-item>
</el-menu>

  </div>
</template>

<script>

export default {
  data() {
    return {
      activeIndex: '1'
    }
  }
}
</script>

<style lang='scss' scoped>

.el-menu-demo {
  display: grid;

  :deep(.el-submenu__title) {
    color: blue !important;
  }
}

.test-btn {
  display: flex;
  color: red;
}

</style>

【en】Hope to convert deep syntax
【zh-cn】希望能转换 deep语法

【en】Now, packaging is being executed without any errors, but the deep syntax has not been converted
【zh-cn】现在，打包没有报任何错误，但是deep语法没有被转换

PS D:\参考资料\test-ui> pnpm run build

> [email protected] build D:\参考资料\test-ui
> rollup -c


./src/index.js → lib/index.esm.js, lib/index.umd.js...
created lib/index.esm.js, lib/index.umd.js in 467ms

demo

【en】Complete configuration file
【zh-cn】完整的配置文件

rollup.config.mjs

import { defineConfig } from 'rollup'
import vue from 'rollup-plugin-vue'
import { cleandir } from 'rollup-plugin-cleandir'
import { babel } from '@rollup/plugin-babel';
import postcss from 'rollup-plugin-postcss'
import autoprefixer from 'autoprefixer'

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';

import copy from 'rollup-plugin-copy'


import sass from 'rollup-plugin-sass';

export default defineConfig({
  input: './src/index.js',
  output: [
    {
      file: 'lib/index.esm.js',
      format: 'esm',
      exports: 'named'
    },
    {
      file: 'lib/index.umd.js',
      format: 'umd',
      name: 'xyzui',
      globals: {
        vue: 'Vue',
        'vue-router': 'VueRouter',
        axios: 'axios',
        'element-ui': 'ELEMENT'
      }
    }
  ],

  plugins: [
    cleandir('lib'),

     // 将node_modules里面的依赖打包
     resolve(), // 解析依赖
    vue(),
    babel({
      // exclude: 'node_modules/**',
      presets: ['@vue/babel-preset-jsx'],
     // bundled-需要显示指明babelHelpers 配置， 没配置，控制台有一些warning
      babelHelpers: 'bundled',
      // 5.2.1 是可以不用配置  extensions
      // 5.2.2 以后 需要将 vue配置进去
      extensions:['.js', '.jsx', '.es6', '.es', '.mjs','.vue'],
      filter: id=>{
        return /(\.js|\.jsx|\.es6|\.es|\.mjs)$/.test(id) && !/node_modules/.test(id)
      }
    }),
     // 需要处理vue中的css
     postcss({
      plugins: [
        /**
         * {
          // browsers: 'last 5 version'
          overrideBrowserslist: [
            "last 2 versions"
          ]
        }
         */
        // autoprefixer()
      ],
      extensions: ['.css', '.scss', '.less']
    }),
  ],
  external: [
    "Vue",
    'vue-router',
    'axios',
    'element-ui'
  ]
})

【en】Complete dependency files
【zh-cn】完整的依赖文件

{
  "name": "xyzui",
  "description": "vue公共组件",
  "version": "0.1.1",
  "main": "lib/index.umd.js",
  "module": "lib/index.esm.js",
  "scripts": {
    "build": "rollup -c"
  },
  "devDependencies": {
    "@babel/core": "^7.23.7",
    "@rollup/plugin-babel": "^6.0.4",
    "@rollup/plugin-commonjs": "^25.0.7",
    "@rollup/plugin-node-resolve": "^15.2.3",
    "@vue/babel-helper-vue-jsx-merge-props": "^1.4.0",
    "@vue/babel-preset-jsx": "^1.4.0",
    "autoprefixer": "^10.4.16",
    "axios": "^1.6.4",
    "babel-preset-env": "^1.7.0",
    "element-ui": "^2.15.14",
    "less": "^4.2.0",
    "postcss": "^8.4.33",
    "rollup": "^4.9.2",
    "rollup-plugin-cleandir": "^2.0.0",
    "rollup-plugin-copy": "^3.5.0",
    "rollup-plugin-postcss": "^4.0.2",
    "rollup-plugin-sass": "^1.12.21",
    "rollup-plugin-vue": "^5.1.9",
    "sass": "^1.69.7",
    "vue": "2.7.16",
    "vue-router": "3.6.5",
    "vue-template-compiler": "2.7.16"
  }
}

Project Structure

【zh-cn】项目结构

- lib
- src
  - index.js
  - test.vue
 - rollup.config.mjs

Current conversion results

【zh-cn】 当前转换的结果

 /* style */
  const __vue_inject_styles__ = function (inject) {
    if (!inject) return
    inject("data-v-178f2dae_0", { source: ".el-menu-demo[data-v-178f2dae] {\n  display: grid;\n}\n.el-menu-demo[data-v-178f2dae] :deep(.el-submenu__title) {\n  color: blue !important;\n}\n.test-btn[data-v-178f2dae] {\n  display: flex;\n  color: red;\n}\n\n/*# sourceMappingURL=test.vue.map */", map: {"version":3,"sources":["D:\\参考资料\\test-ui\\src\\test.vue","test.vue"],"names":[],"mappings":"AA+CA;EACA,aAAA;AC9CA;ADgDA;EACA,sBAAA;AC9CA;ADkDA;EACA,aAAA;EACA,UAAA;AC/CA;;AAEA,mCAAmC","file":"test.vue","sourcesContent":["<template>\r\n  <div>\r\n    你好\r\n    <div>\r\n      <el-button  class='test-btn'>点我</el-button>\r\n    </div>\r\n\r\n\r\n    <el-menu :default-active=\"activeIndex\" class=\"el-menu-demo\" mode=\"horizontal\">\r\n  <el-menu-item index=\"1\">处理中心</el-menu-item>\r\n  <el-submenu index=\"2\">\r\n    <template slot=\"title\">我的工作台</template>\r\n    <el-menu-item index=\"2-1\">选项1</el-menu-item>\r\n    <el-menu-item index=\"2-2\">选项2</el-menu-item>\r\n    <el-menu-item index=\"2-3\">选项3</el-menu-item>\r\n    <el-submenu index=\"2-4\">\r\n      <template slot=\"title\">选项4</template>\r\n      <el-menu-item index=\"2-4-1\">选项1</el-menu-item>\r\n      <el-menu-item index=\"2-4-2\">选项2</el-menu-item>\r\n      <el-menu-item index=\"2-4-3\">选项3</el-menu-item>\r\n    </el-submenu>\r\n  </el-submenu>\r\n  <el-menu-item index=\"3\" >消息中心</el-menu-item>\r\n</el-menu>\r\n\r\n<div>\r\n  <jsxCom></jsxCom>\r\n</div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport jsxCom from './jsx.vue'\r\nexport default {\r\n  components: {\r\n    jsxCom\r\n  },\r\n  data() {\r\n    return {\r\n      activeIndex: '1'\r\n    }\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang='scss' scoped>\r\n\r\n.el-menu-demo {\r\n  display: grid;\r\n\r\n  :deep(.el-submenu__title) {\r\n    color: blue !important;\r\n  }\r\n}\r\n\r\n.test-btn {\r\n  display: flex;\r\n  color: red;\r\n}\r\n\r\n</style>",".el-menu-demo {\n  display: grid;\n}\n.el-menu-demo :deep(.el-submenu__title) {\n  color: blue !important;\n}\n\n.test-btn {\n  display: flex;\n  color: red;\n}\n\n/*# sourceMappingURL=test.vue.map */"]}, media: undefined });

  };

[luoriwusheng-xia]

【en】Now I want to know which plugin is not working, using webpack packagingis normal.
【zh-cn】现在想知道到底是哪一个插件没有起作用， 使用webpack打包是正常的。

[SummyGitHub]

set preprocessStyles = true in rollup-plugin-vue