如何在CSS模塊中使用全局變量？

Question

我忙於學習CSS模塊的反應，我不太明白如何存儲變量？例如，在Sass中，您可以這樣做：

// _variables.scss 
$primary-color: #f1f1f1; 

// heading.scss 
@import './variables'; 
.heading { 
    color: $primary-color 
} 

您如何在CSS模塊中實現此目的？

Answer 1

一種方法可能是使用依賴關係。例如，

// variables.css 
.primaryColor { 
    color: #f1f1f1 
} 

// heading.css 
.heading { 
    composes: primaryColor from "./variables.css" 
} 

查看更多詳細信息，在這裏：https://github.com/css-modules/css-modules#dependencies

如果您使用的WebPack這裏有更多的例子：https://github.com/webpack/css-loader#composing-css-classes

此外，如果你正在使用的WebPack你仍然可以使用與薩斯CSS模塊。

Answer 2

的CSS-模塊文件在這裏提到的變量： https://github.com/css-modules/css-modules/blob/master/docs/values-variables.md

有了這個，你可以輸入變量，像這樣：

@value colors: "../../main/colors.css"; 
@value primary, secondary, tertiary from colors; 

可以在你的CSS中使用：

.main { 
    background-color: tertiary; 
    border-top: 30px solid primary; 
} 

要使這項工作postcss-loader和postcss-modules-values需要添加到您的webpack配置。請看下圖：

 { 
      test: /\.css$/, 
      use: [{ 
        loader: 'style-loader' 
       }, 
       { 
        loader: 'css-loader', 
        options: { 
         modules: true, 
         localIdentName: '[name]_[local]_[hash:base64:5]' 
        } 
       }, 
       { 
        loader: 'postcss-loader', 
        options: { 
         plugins: [postcssModulesValues] 
        } 
       } 
      ] 
     } 

Answer 3

您可以使用青菜預處理和sass-resources-loader。

sass-resources-loader會將所有變量，mixins等添加到每個必需的sass文件中。