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

Customize Theme Not Working #2147

Closed
gijo-varghese opened this Issue Oct 20, 2017 · 13 comments

Comments

Projects
None yet
4 participants
@gijo-varghese

gijo-varghese commented Oct 20, 2017

I was trying to customize the variables of iview using this guide: https://www.iviewui.com/docs/guide/theme-en (by overriding variables). I've followed the steps correctly, but it's giving me an error:

ERROR  Failed to compile with 1 errors                                 09:20:38

 error  in ./my-theme/index.less

Module build failed: 

@import "./animation/index";
@import "./components/index";
^
Can't resolve './components/index' in '/var/workspace/tuxedo/node_modules/iview/src/styles'
      in /var/workspace/tuxedo/node_modules/iview/src/styles/index.less (line 5, column 0)

 @ ./my-theme/index.less 4:14-135 13:3-17:5 14:22-143
 @ ./src/main.js
 @ multi ./build/dev-client ./src/main.js

Right now I'm using the 'By Tool' method. It's working fine. But the first method is easy to work with.

Again, thanks a lot for such an amazing library 👍

@Ele-Cat

This comment has been minimized.

Show comment
Hide comment
@Ele-Cat

Ele-Cat Oct 20, 2017

I try to use the other issues's answer, but it's still not working, and I have to use theme tool to modification the theme.

Ele-Cat commented Oct 20, 2017

I try to use the other issues's answer, but it's still not working, and I have to use theme tool to modification the theme.

@icarusion

This comment has been minimized.

Show comment
Hide comment
@icarusion

icarusion Oct 20, 2017

Member

Did you setting less in your webpack options?

Member

icarusion commented Oct 20, 2017

Did you setting less in your webpack options?

@icarusion

This comment has been minimized.

Show comment
Hide comment
Member

icarusion commented Oct 20, 2017

@Ele-Cat

This comment has been minimized.

Show comment
Hide comment
@Ele-Cat

Ele-Cat Oct 20, 2017

I can write 'less grammar' in my project, but I can't use [@import '~iview/src/styles/index.less';], when I import this in my project, boom. My head also boom. And I saw your setting just now, tell the truth,I can't understand it.

Ele-Cat commented Oct 20, 2017

I can write 'less grammar' in my project, but I can't use [@import '~iview/src/styles/index.less';], when I import this in my project, boom. My head also boom. And I saw your setting just now, tell the truth,I can't understand it.

@icarusion

This comment has been minimized.

Show comment
Hide comment
@icarusion

icarusion Oct 20, 2017

Member

maybe you can use iview-project instead :)

Member

icarusion commented Oct 20, 2017

maybe you can use iview-project instead :)

@gijo-varghese

This comment has been minimized.

Show comment
Hide comment
@gijo-varghese

gijo-varghese Oct 20, 2017

@icarusion tried that webpack config file. Its giving me the following errors:

These relative modules were not found:

* ./src/vendors in multi ./build/dev-client ./src/vendors
* ./App in ./src/main.js
* ../my-theme/index.less in ./src/main.js
> Listening at http://localhost:8081

gijo-varghese commented Oct 20, 2017

@icarusion tried that webpack config file. Its giving me the following errors:

These relative modules were not found:

* ./src/vendors in multi ./build/dev-client ./src/vendors
* ./App in ./src/main.js
* ../my-theme/index.less in ./src/main.js
> Listening at http://localhost:8081
@hefengxian

This comment has been minimized.

Show comment
Hide comment
@hefengxian

hefengxian Oct 23, 2017

Hi everyone, I think i found solution, this error because of iview has omitted .less extension. so we can change webpack config, please locate webpack.base.conf.js (usually your_project_dir/build/webpack.base.conf.js) then found line

// ...
  resolve: {
    // add .less
    extensions: ['.js', '.vue', '.json', '.less'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src')
    }
  },
// ...

and add .less then compile will success.
@Ele-Cat @gijo-varghese @icarusion

hefengxian commented Oct 23, 2017

Hi everyone, I think i found solution, this error because of iview has omitted .less extension. so we can change webpack config, please locate webpack.base.conf.js (usually your_project_dir/build/webpack.base.conf.js) then found line

// ...
  resolve: {
    // add .less
    extensions: ['.js', '.vue', '.json', '.less'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src')
    }
  },
// ...

and add .less then compile will success.
@Ele-Cat @gijo-varghese @icarusion

@Ele-Cat

This comment has been minimized.

Show comment
Hide comment
@Ele-Cat

Ele-Cat Oct 23, 2017

@hefengxian Hi, Brother, is there has git address can refer to?thx

Ele-Cat commented Oct 23, 2017

@hefengxian Hi, Brother, is there has git address can refer to?thx

@hefengxian

This comment has been minimized.

Show comment
Hide comment
@hefengxian

hefengxian Oct 24, 2017

@Ele-Cat I build a test repository for you, I'm use vue-cli initialize the project. you can clone the repository then follow the readme.md to test it.

I was modified this line webpack.base.conf.js#L23. then I'm change the primary color to #58b956 and i got this
image

hefengxian commented Oct 24, 2017

@Ele-Cat I build a test repository for you, I'm use vue-cli initialize the project. you can clone the repository then follow the readme.md to test it.

I was modified this line webpack.base.conf.js#L23. then I'm change the primary color to #58b956 and i got this
image

@Ele-Cat

This comment has been minimized.

Show comment
Hide comment
@Ele-Cat

Ele-Cat Oct 24, 2017

@hefengxian wow, it's works well, thx so much, wish you all the best with your work, thx again.

Ele-Cat commented Oct 24, 2017

@hefengxian wow, it's works well, thx so much, wish you all the best with your work, thx again.

@hefengxian

This comment has been minimized.

Show comment
Hide comment
@hefengxian

hefengxian Oct 24, 2017

@Ele-Cat 😏 好像咱俩都是中国人啊。。。。

hefengxian commented Oct 24, 2017

@Ele-Cat 😏 好像咱俩都是中国人啊。。。。

@Ele-Cat

This comment has been minimized.

Show comment
Hide comment
@Ele-Cat

Ele-Cat Oct 24, 2017

@hefengxian 吓,被发现了[冷汗脸]

Ele-Cat commented Oct 24, 2017

@hefengxian 吓,被发现了[冷汗脸]

@gijo-varghese

This comment has been minimized.

Show comment
Hide comment
@gijo-varghese

gijo-varghese Oct 24, 2017

@hefengxian Thanks a lot. Its now working. Adding 'less' to webpack didn't solve the problem. I was using the vue-cli to create the project. Here is the solution:

  1. Import the less file to main.js as per the documentation
  2. Add .less to the extensions in webpack.base.conf.js
  resolve: {
    extensions: ['.js', '.vue', '.json','.less'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },
  1. Install less loader using: npm install --save-dev less-loader less

gijo-varghese commented Oct 24, 2017

@hefengxian Thanks a lot. Its now working. Adding 'less' to webpack didn't solve the problem. I was using the vue-cli to create the project. Here is the solution:

  1. Import the less file to main.js as per the documentation
  2. Add .less to the extensions in webpack.base.conf.js
  resolve: {
    extensions: ['.js', '.vue', '.json','.less'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },
  1. Install less loader using: npm install --save-dev less-loader less
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment