CSS 모듈에서 전역 변수를 사용하는 방법은 무엇입니까?

Question

CSS-React를 배우는 데 바쁜데 어떻게 변수를 저장하는지 이해하지 못합니까? 예를 들어 Sass에서 다음과 같이 할 수 있습니다.

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

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

CSS 모듈에서 어떻게 구현합니까?

Answer 1

편도는 의존성을 사용할 수 있습니다. 당신이 웹팩을 사용하는 경우 https://github.com/css-modules/css-modules#dependencies

더 많은 예제가 여기있다 : 예를 들어,

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

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

여기에서 자세한 내용을 참조하면 웹팩을 사용하는 경우 당신은 여전히 ​​함께 말대꾸를 사용할 수 있습니다 또한 https://github.com/webpack/css-loader#composing-css-classes

CSS 모듈.

Answer 2

CSS의-모듈 문서는 여기에 변수를 언급이와 https://github.com/css-modules/css-modules/blob/master/docs/values-variables.md

당신은 너무로 변수를 가져올 수 있습니다

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

: 당신의 CSS를 사용할 수 있습니다

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

이 작업을하려면 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는 필요한 모든 sass 파일에 모든 변수, mixins 등을 추가합니다.