版本说明 "element-ui": "^1.0.2" "element-theme": "^0.2.0" "element-theme-default": "^1.0.2"

执行 node_modules/.bin/et 命令时报错提示： Error: ENOENT: no such file or directory, open 'xxx/node_modules/element-theme-default/src/vue-popup/lib/popup.css'

I didn't find any --submenu-item-fill references in theme-default

menu css src: https://github.com/ElemeFE/element/blob/dev/packages/theme-default/src/menu.css

variable: https://github.com/ElemeFE/element/blob/dev/packages/theme-default/src/common/var.css#L524

找不到字体。

复现链接

https://github.com/reverland/element-starter

错误详情：

ERROR in ./~/.npminstall/css-loader/0.23.1/css-loader?sourceMap!./~/.npminstall/vue-loader/9.7.0/vue-loader/lib/style-rewriter.js?id=data-v-d5b46166!./~/.npminstall/vue-loader/9.7.0/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue
Module not found: Error: Can't resolve './fonts/element-icons.eot?t=1472440741' in '/Users/reverland/Work/themexx/element-starter/src'
 @ ./~/.npminstall/css-loader/0.23.1/css-loader?sourceMap!./~/.npminstall/vue-loader/9.7.0/vue-loader/lib/style-rewriter.js?id=data-v-d5b46166!./~/.npminstall/vue-loader/9.7.0/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue 6:7192-7241
 @ ./~/.npminstall/vue-style-loader/1.0.0/vue-style-loader!./~/.npminstall/css-loader/0.23.1/css-loader?sourceMap!./~/.npminstall/vue-loader/9.7.0/vue-loader/lib/style-rewriter.js?id=data-v-d5b46166!./~/.npminstall/vue-loader/9.7.0/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue
 @ ./src/App.vue
 @ ./src/main.js
 @ multi main

ERROR in ./~/.npminstall/css-loader/0.23.1/css-loader?sourceMap!./~/.npminstall/vue-loader/9.7.0/vue-loader/lib/style-rewriter.js?id=data-v-d5b46166!./~/.npminstall/vue-loader/9.7.0/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue
Module not found: Error: Can't resolve './fonts/element-icons.woff?t=1472440741' in '/Users/reverland/Work/themexx/element-starter/src'
 @ ./~/.npminstall/css-loader/0.23.1/css-loader?sourceMap!./~/.npminstall/vue-loader/9.7.0/vue-loader/lib/style-rewriter.js?id=data-v-d5b46166!./~/.npminstall/vue-loader/9.7.0/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue 6:7264-7314
 @ ./~/.npminstall/vue-style-loader/1.0.0/vue-style-loader!./~/.npminstall/css-loader/0.23.1/css-loader?sourceMap!./~/.npminstall/vue-loader/9.7.0/vue-loader/lib/style-rewriter.js?id=data-v-d5b46166!./~/.npminstall/vue-loader/9.7.0/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue
 @ ./src/App.vue
 @ ./src/main.js
 @ multi main

ERROR in ./~/.npminstall/css-loader/0.23.1/css-loader?sourceMap!./~/.npminstall/vue-loader/9.7.0/vue-loader/lib/style-rewriter.js?id=data-v-d5b46166!./~/.npminstall/vue-loader/9.7.0/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue
Module not found: Error: Can't resolve './fonts/element-icons.ttf?t=1472440741' in '/Users/reverland/Work/themexx/element-starter/src'
 @ ./~/.npminstall/css-loader/0.23.1/css-loader?sourceMap!./~/.npminstall/vue-loader/9.7.0/vue-loader/lib/style-rewriter.js?id=data-v-d5b46166!./~/.npminstall/vue-loader/9.7.0/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue 6:7352-7401
 @ ./~/.npminstall/vue-style-loader/1.0.0/vue-style-loader!./~/.npminstall/css-loader/0.23.1/css-loader?sourceMap!./~/.npminstall/vue-loader/9.7.0/vue-loader/lib/style-rewriter.js?id=data-v-d5b46166!./~/.npminstall/vue-loader/9.7.0/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue
 @ ./src/App.vue
 @ ./src/main.js
 @ multi main

ERROR in ./~/.npminstall/css-loader/0.23.1/css-loader?sourceMap!./~/.npminstall/vue-loader/9.7.0/vue-loader/lib/style-rewriter.js?id=data-v-d5b46166!./~/.npminstall/vue-loader/9.7.0/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue
Module not found: Error: Can't resolve './fonts/element-icons.svg?t=1472440741' in '/Users/reverland/Work/themexx/element-starter/src'
 @ ./~/.npminstall/css-loader/0.23.1/css-loader?sourceMap!./~/.npminstall/vue-loader/9.7.0/vue-loader/lib/style-rewriter.js?id=data-v-d5b46166!./~/.npminstall/vue-loader/9.7.0/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue 6:7443-7492
 @ ./~/.npminstall/vue-style-loader/1.0.0/vue-style-loader!./~/.npminstall/css-loader/0.23.1/css-loader?sourceMap!./~/.npminstall/vue-loader/9.7.0/vue-loader/lib/style-rewriter.js?id=data-v-d5b46166!./~/.npminstall/vue-loader/9.7.0/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue
 @ ./src/App.vue
 @ ./src/main.js
 @ multi main

可以通过两种方式绕过这个问题

1. 把icon.css里的font-face定义拿出来放到index.css中
2. 在js中import index.css，不用vue-loader来处理。

当我使用element-theme 编译生成css样式表时，发现生成对应组件的css里面又包含了其他组件的样式表。比如table组件的样式表包含了checkbox的样式表，原因可能是table组件导入了checkbox组件。 我期望的是生成的样式表单一，只生产自己组件的样式，不要包含其他组件的样式表。

因为我目前的做法是为每个组件直接import 他自己的样式表，webpack在打包的时候会自动导入引用的组件的样式表，我这样做为了方便维护组件。

示例：

import React from 'react';
import ReactDOM from 'react-dom';
import { Component, PropTypes } from '../../../libs';
import { enhanceColumns, calculateFixedWidth, scheduleLayout } from './mixins';
import { getScrollBarWidth } from './utils';
import TableHeader from './TableHeader';
import TableBody from './TableBody';
import TableFooter from './TableFooter';
import i18n from '../locale';

import type {
  TableProps,
  TableState,
  DefaultTableProps
} from './Types';
// 下面这句是导入的element-theme编译生成的css
import '../theme/table.css'

但是这个table.css文件里面包含了CheckBox的样式表，有没有办法让table.css被编译时只保留Table组件的样式表。而不用自己去手动更改table.css里面多余的其他组件的样式？

Hello, after quick read of source I noticed the theme is using Css4 standard, which at current moment has to be compiled to regular Css through some preprocessor. Many application frameworks are configured to compile Sass files. Using Css4 files to create customized theme requires extra-setup for each project.

I would suggest migrating to Sass at the moment or developing parallel version in 'src-sass' folder. Anyway, ElementUi is by far the biggest Vue ui library and you guys did a lot of good work!

[update] Realised it's not CSS4, but Sass + PostCss

Some icons referenced in documentation like el-icon-info are not showed. Instead of icon print, nothing appears.

Using theme-chalk (apparently used in the documentation) all icons works fine.

The current font URL has unexpected results.

Example: If browser is in URL http://app.com/users/create, fonts will be loaded from http://app.com/users/create/fonts...., which is likely to return a 404.

This PR proposes adding a slash to the beginning of each font URL to ensure always the same behavior.

Example: http://app.com/users/create -> http://app.com/fonts.... http://app.com/ -> http://app.com/fonts....

Hello, I cannot change the border-radius with the theme tool for the input elements, as described in the docs: http://element.eleme.io/#/en-US/component/custom-theme

I guess the problem is, that the border-radius is fixed in the following lines:

https://github.com/ElementUI/theme-default/blob/master/src/input.css#L15 https://github.com/ElementUI/theme-default/blob/master/src/input.css#L123 https://github.com/ElementUI/theme-default/blob/master/src/input.css#L190

Should be fixed by replacing those lines to: border-radius: var(--button-border-radius);

Thanks, Philipp

the icon path will lead to some problem that can not find the icon resources in mac os, after I find the problem ,I change the font path, add ./ in the icon path , then this problem disappeared. but in the windows ,you can not find this problem,so I think the icon path should add ./

Hi!

In my main.ts file, I have:

import 'element-theme-default' ;

and in my webpack.config.prod.js:

const extractCss = new ExtractTextPlugin
(
    {
        filename: 'css/[name].[contenthash]-first.css',
        disable: process.env.NODE_ENV === 'development'
    }
) ;

const extractSass = new ExtractTextPlugin
(
    {
        filename: 'css/[name].[contenthash]-second.css',
        disable: process.env.NODE_ENV === 'development'
    }
) ;

webpackConfig.module.rules = 
[
    ...webpackConfig.module.rules,
    {
        test: /\.css$/,
        use: ExtractTextPlugin.extract
        (
            {
                use: ['css-loader'],
                fallback: 'style-loader'
            }
        )
    },
    {
        test: /\.*(sass|scss)$/,
        use: ExtractTextPlugin.extract
        (
            {
                use: ['css-loader', 'sass-loader'],
                fallback: 'style-loader'
            }
        )
    },
    {
        test: /\.(jpg|png|gif)$/,
        loader: 'file-loader?name=assets/img/[name].[ext]'
    },
    {
        test: /\.(eot|svg|ttf|woff|woff2)$/,
        loader: 'file-loader?name=fonts/[name].[ext]'
    }
] ;

webpackConfig.plugins =
[
    ...webpackConfig.plugins,
    new CommonsChunkPlugin
    (
        {
            name: 'vendor',
            minChunks: function (module)
            {
                return module.context && module.context.indexOf('node_modules') !== -1 ;
            }
        }
    ),
    new CommonsChunkPlugin
    (
        {
            name: 'manifest',
            minChunks: Infinity
        }
    ),
    extractCss,
    extractSass,
    ...
] ;

module.exports = webpackConfig ;

but it does not work.

However, if I replace the ExtractTextPlugin.extract parts with:

...
{
        test: /\.css$/,
        use:
        [
            {
                loader: 'style-loader'
            },
            {
                loader: 'css-loader'
            }
        ]
    },
    {
        test: /\.scss$/,
        use:
        [
            {
                loader: 'style-loader'
            },
            {
                loader: 'css-loader'
            },
            {
                loader: 'sass-loader'
            }
        ]
    }
...

it works...

Any idea?

npm i https://github.com/ElementUI/theme-default -D.

there is no file "lib/index.css" that defined in the main field, I know the lib dir is generated by npm run build, but when I install the package from npm, it does have the lib dir. why?

Since I would like to use some of the element-ui components (I love it~) in project, I would like to build it myself to make it compatible with existing code and integrate with less. But during the build process (using postcss-salad), it shew error indicating "Undefined mixin button-size" in checkbox.css.

I think it is raised by missing "@import ./mixins/_buttons.css' at the header of "checkbox.css"

Let me know if i missed something, thanks