Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cannot convert deep syntax in Vue #458

Open
luoriwusheng-xia opened this issue Jan 5, 2024 · 2 comments
Open

Cannot convert deep syntax in Vue #458

luoriwusheng-xia opened this issue Jan 5, 2024 · 2 comments

Comments

@luoriwusheng-xia
Copy link

luoriwusheng-xia commented Jan 5, 2024

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 });

  };

image

@luoriwusheng-xia
Copy link
Author

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

@SummyGitHub
Copy link

SummyGitHub commented Jun 3, 2024

set preprocessStyles = true in rollup-plugin-vue

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants