小编Vir*_*inh的帖子

我已经使用LESS在我的应用程序中实现了主题,并使用nodejs less模块​​将较少的文件编译到CSS,但它在一个特定的场景中不起作用.

我也在为我的应用程序使用Bootstrap并使用Bootstrap较少的源代码我只在我的应用程序中编译我想要的css.

我也可以在我的各种主题中覆盖Bootstrap变量和mixins.因此,在编译Bootstrap时我需要考虑我的主题变量和mixins.

因此,区分Bootstrap变量/ mixins和CSS规则我创建了2个不同的文件,

• application_variables.less - 它包含所有必需的Bootstrap变量和mixins
• application.less - 它包含所有必需的Bootstrap CSS规则

目录结构适用于应用程序

|
|--sample_application
    |--resources
    |   |--libraries
    |      |--bootstrap
    |           |--css
    |           |   |--application.less
    |           |--less
    |           |   |--application_variables.less    
    |--themes
        |--red
        |   |--mixins
        |   |   |--mixins.less
        |   |--variables
        |   |   |--variables.less    
        |   |--red.less    
        |--blue
        |   |--mixins
        |   |   |--mixins.less
        |   |--variables
        |   |   |--variables.less    
        |   |--blue.less    
        |--themes.less

说明哪个文件包含什么？

1. /sample_application/themes/<-theme_name->/mixins/mixins.less: - 此文件包含所有特定于应用程序的mixins和重写的bootstrap mixins.

2. /sample_application/themes/<-theme_name->/variables/variables.less: - 此文件包含所有特定于应用程序的变量和重写的引导变量.

3. /sample_application/themes/<-theme_name->/<-theme_name->.less: - 此文件包含该特定主题的mixins和变量的文件导入.

@import "./variables/variables";
@import "./mixins/mixins"; …