css-loader breaking postcss-cssnext variables

Question

다음과 같이 EventInfoCard를 구성합니다. 프리 로딩 상태에있을 때 부모로부터 많은 CSS를 상속받는 다른 구성 요소를 렌더링합니다. 나는 postcss-cssnext 변수를 사용하고 있는데이 함수는 css-loader과 잘 작동하지 않습니다.

@import '../constants.css'; 

.root { 
    background: blue; 
} 

.thumbnail { 
    composes: thumbnail from './InfoCard.css'; 
    background-color: var(--tones-lightest); 
} 

.description { 
    composes: description from './InfoCard.css'; 
} 

지금은 보이지만

EventInfoCardPreloading.css

@import '../constants.css'; 

.root { 

} 

.thumbnail { 
    display: block; 
    width: 100%; 
    height: 0px; 
    padding-bottom: 56%; 
    position: relative; 
    overflow: hidden; 
    border-radius: var(--xxxs)px; 
} 

.notification { 
    border-radius: var(--xxxs)px; 
    font-size: 12px; 
    display: inline-block; 
    height: var(--s)px; 
    padding: 0 var(--xxs)px; 
    line-height: var(--s)px; 
    text-transform: uppercase; 
    font-weight: var(--weight-medium); 
    margin-right: var(--xxs)px; 
} 

.description { 
    letter-spacing: -0.1px; 
    margin-top: 7px; 
} 

EventInfoCard.css

는 EventInfoCard의 CSS 초래하지 아래와 같이이 유효하지 않은 CSS로 끝나는 변수를 변환합니다. 그래서 내가 뭘 잘못하고 있니? 나는 작곡가가 오직 클래스 이름을 잡고 파일을 가져 오지 않을 것이라고 생각했다.

postcss의 설정 :

const path = require('path') 

module.exports = { 
    plugins: { 
     'postcss-partial-import': {}, 
     'postcss-mixins': { 
      mixinsDir: path.join(__dirname, 'statics', 'mycujoo-theme', 'mixins') 
     }, 
     'postcss-nested': {}, 
     'postcss-cssnext': { 
      browsers: ['last 2 versions', '> 5%'], 
     } 
    } 
} 

웹팩 로더 설정 : 구성 이후

test: /\.css$/, 
    use: extractCSS.extract({ 
     fallback: 'style-loader', 
     use: [ 
      { loader: 'css-loader', options: { modules: true, localIdentName: '[name]__[local]___[hash:base64:5]' } }, 
      { loader: 'postcss-loader' } 
     ] 
    }), 

Answer 1

이 CSS Modules 및 postcss-loader의 우리를 만들고, 또한 만들기 위해 importLoaders 옵션을 선언해야 postcss-loader and css-loader with CSS modules enabled work together.

test: /\.css$/, 
use: extractCSS.extract({ 
    fallback: 'style-loader', 
    use: [ 
     { loader: 'css-loader', options: { modules: true, importLoaders: 1, localIdentName: '[name]__[local]___[hash:base64:5]' } }, 
     { loader: 'postcss-loader' } 
    ] 
}),