style is not importing

[yipcma]

.babelrc

{
  "presets": [
    ["es2015", { "modules": false }]
  ],
  "plugins": [["component", [
    {
      "libraryName": "mint-ui",
      "style": true
    }
  ]]]
}

main.js

import Vue from 'vue';
import App from './app';

import { Checklist } from 'mint-ui';
Vue.component(Checklist.name, Checklist);

new Vue({ // eslint-disable-line
  el: '#app',
  render: h => h(App)
});

project scaffolded with cooking

[vbgm]

it also did not work for me in Meteor.. :-(

[pktest1]

+1

[Alvin-Liu]

+1

[DotCoyote]

Can't speak for your .babelrc-config, but got the same issue after upgrading to babel@^7:

Base .babelrc:

{
  "presets": [
    [
      "@babel/preset-env", {
        "useBuiltIns": "entry",
        "debug": false
      }
    ]
  ],
  "plugins": [
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-object-rest-spread",
    "@babel/plugin-transform-runtime"
  ]
}

When adding

...

  "plugins": [
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-object-rest-spread",
    "@babel/plugin-transform-runtime",
    [
      "component",
      [
        {
          "libraryName": "element-ui",
          "styleLibraryName": "theme-chalk"
        }
      ]
    ]
  ]

I get:

Module build failed: Error: Cannot read config file: /usr/share/nginx/html/berater-backend/.eslintrc-dev.js
Error: .plugins[4][1] must be an object, false, or undefined
    at assertPluginItem (/usr/share/nginx/html/berater-backend/node_modules/@babel/core/lib/config/validation/option-assertions.js:127:15)
    at /usr/share/nginx/html/berater-backend/node_modules/@babel/core/lib/config/validation/option-assertions.js:104:14
    at Array.forEach (<anonymous>)
    at assertPluginList (/usr/share/nginx/html/berater-backend/node_modules/@babel/core/lib/config/validation/option-assertions.js:103:9)
    at /usr/share/nginx/html/berater-backend/node_modules/@babel/core/lib/config/validation/options.js:71:20
    at Array.forEach (<anonymous>)
    at validate (/usr/share/nginx/html/berater-backend/node_modules/@babel/core/lib/config/validation/options.js:57:21)
    at /usr/share/nginx/html/berater-backend/node_modules/@babel/core/lib/config/config-chain.js:105:36
    at cachedFunction (/usr/share/nginx/html/berater-backend/node_modules/@babel/core/lib/config/caching.js:40:17)
    at init (/usr/share/nginx/html/berater-backend/node_modules/@babel/core/lib/config/config-chain.js:92:12)
    at /usr/share/nginx/html/berater-backend/node_modules/@babel/core/lib/config/config-chain.js:139:17
    at buildRootChain (/usr/share/nginx/html/berater-backend/node_modules/@babel/core/lib/config/config-chain.js:57:20)
    at loadConfig (/usr/share/nginx/html/berater-backend/node_modules/@babel/core/lib/config/index.js:45:53)
    at loadOptions (/usr/share/nginx/html/berater-backend/node_modules/@babel/core/lib/index.js:72:36)
    at OptionManager.init (/usr/share/nginx/html/berater-backend/node_modules/@babel/core/lib/index.js:82:12)
    at compile (/usr/share/nginx/html/berater-backend/node_modules/@babel/register/lib/node.js:57:40)
    at Module._compile (/usr/share/nginx/html/berater-backend/node_modules/pirates/lib/index.js:86:27)
    at Module._extensions..js (module.js:652:10)
    at Object.newLoader [as .js] (/usr/share/nginx/html/berater-backend/node_modules/pirates/lib/index.js:96:7)
    at Module.load (module.js:560:32)
    at tryModuleLoad (module.js:503:12)
    at Function.Module._load (module.js:495:3)

 @ multi webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000&reload=true&overlay=true ../src/js/main.js

Leaving it out won't throw any errors, but the css is not loaded with the components I include.

[yujinpan]

When I re-edit the place where the component was introduced, it sometimes becomes normal, very strange...

[andosteinmetz]

+1 I'm encountering the same issue.

• Babel 7.4.5
• element-ui 2.10.1
• Webpack 4.33.0
• Vue 2.6.10

[andosteinmetz]

For anybody else running into this, I've manually imported the styles needed for my component:

require('element-ui/packages/theme-chalk/src/base.scss');
require('element-ui/packages/theme-chalk/src/date-picker.scss');

and while not ideal, this is working for me until the issue is resolved.

[tripflex]

I can confirm this is happening as well, with element-ui -- issue is over 3 years old and still no response from maintainers?