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

The style config can't work for function #602

Open
MrPluto0 opened this issue Mar 13, 2022 · 4 comments
Open

The style config can't work for function #602

MrPluto0 opened this issue Mar 13, 2022 · 4 comments

Comments

@MrPluto0
Copy link

import { Chatbox } from "create-ui-lib";
Vue.use(Chatbox);
// babel.config.js
plugins: [
  [
    "import",
    {
      libraryName: "create-ui-lib",
      style: (name) => `${name}/style`,
    },
  ],
],

In above config, when run npm run serve , the css style can't work, But don't cause import error.
But when set style:"css" or style:true, the css file will cause import error:
Module not found: Error: Can't resolve 'create-ui-lib/lib/chatbox/style/css'

That means the css file isn't imported. Why not useful for function?

// package.json
"dependencies": {
  "core-js": "^3.8.3",
  "create-ui-lib": "^0.1.3",
  "vue": "^2.6.14"
},
"devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "babel-plugin-import": "^1.13.3",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-vue": "^8.0.3",
    "less": "^4.0.0",
    "less-loader": "^8.0.0",
    "prettier": "^2.4.1",
    "vue-template-compiler": "^2.6.14"
  }
@MrPluto0
Copy link
Author

style配置中写函数就不生效,不会根据函数返回的路径导入,除非用true或css。

@abu3389
Copy link

abu3389 commented Nov 28, 2022

我也遇到同样问题了,怎么整

@MrPluto0
Copy link
Author

MrPluto0 commented Dec 3, 2022

我也遇到同样问题了,怎么整

你可以不用这种自定义路径的配置方式,比如你打包的时候把样式文件全部弄一个文件夹下lib/theme,这样的话babel这样配置,找css文件的时候会去找lib/theme/[name].css

plugins: [
  [
    "import",
    {
      libraryName: "@gypsophlia/create-ui",
      styleLibraryDirectory: "lib/theme",
    },
  ],
];

@flyromance
Copy link

flyromance commented Apr 29, 2024

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  plugins: [
    [
      'import',
      {
        libraryName: 'vant',
        style: (componentName) => {
          return `${componentName}/style/less`
        },
      },
    ],
  ],
}

我也遇到相似的问题了,看了插件的代码,如果style是函数也会处理,为啥不生效啊。。。 @sorrycc

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

3 participants