Giter VIP home page Giter VIP logo

Comments (2)

MildTomato avatar MildTomato commented on June 5, 2024

I'll take a look at this later.
This might be exactly what I need :-)

from antd-scss-theme-plugin.

nad182 avatar nad182 commented on June 5, 2024

It's not going to work if you're trying to change a property with a variable that hasn't been defined in your antdCustom.scss file.
For example, if you didn't define @highlight-color in your file and you're trying to set '@label-required-color': '@highlight-color'; (even though it's defined in 'antd/dist/antd.less'), it's going to throw an error.

The only way to to deal with the issue (and I've tried around 7-8 different approaches, including scss-to-json, less-to-json, this plugin and so on), is to write your styles in js file like so:

theme.js

module.exports = {
  '@primary-color': '#252930',
  '@dark-gray': '#a09fa0',
  '@light-gray': '#f2f1f1'
}

And then in config-overrides.js:

const theme = require('../common/assets/styles/theme')
const {
  ..., // your configs
  addLessLoader,
} = require('customize-cra')

module.exports = override(
  ..., // your configs
  addLessLoader({
    lessOptions: {
      javascriptEnabled: true,
      modifyVars: theme,
    },
  }),

Unfortunately, with this approach (and others I've tried), you can forget about hot reloading when you change theme variables. Other than that, everything works as expected - your variables override the default ones, and the derivative variable are calculated based on your vars (meaning, you don't need to provide values for them, i.e, no need for '@primary-5': '#fff').

from antd-scss-theme-plugin.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.