종속성 업그레이드 지옥. 이 CSS 로더에 어떤 문제가 있습니까?

Question

종속성 업그레이드 지옥에서. 누군가에게 조언을 구할 수 있는지 궁금합니다.

한 가지만 제외하면 모든 것을 망칠 수있었습니다. 프로젝트에서 PostCSS와 함께 CSS 모듈을 사용하고 있습니다. 나는 Webpack 2로 업그레이드하고 다른 모든 패키지도 업그레이드 할 수있는 기회를 얻고 있습니다.

내가 겪고있는 문제는 CSS 프로세서 중 하나입니다. 기본적으로 다른 파일에서 클래스를로드하는 composes 속성을 포함하는 모든 CSS 파일이 실패합니다.

이

은 웹팩 CSS 로더가 모습입니다 같은 :

test: /\.css/, 
exclude: /node_modules/, 
use: [ 
    'style-loader', 
    { 
     loader: 'css-loader', 
     options: { 
      modules: true, 
      localIdentName: '[folder]__[local]___[hash:base64:5]', 
      importLoaders: 1 
     } 
    }, 
    'postcss-loader' 
] 

내가 브라우저 오류 콘솔에서이 오류가 이러한 구성하는 중 하나를 사용하여 스타일 시트를 사용하는 페이지로드하려고 :

을

Dynamic page loading failed TypeError: Cannot read property 'removeChild' of null 
    at removeStyleElement (eval at ./node_modules/style-loader/addStyles.js (main.js:9858), <anonymous>:122:25) 
    at remove (eval at ./node_modules/style-loader/addStyles.js (main.js:9858), <anonymous>:168:4) 
    at Array.updateStyle (eval at ./node_modules/style-loader/addStyles.js (main.js:9858), <anonymous>:180:4) 
    at addStylesToDom (eval at ./node_modules/style-loader/addStyles.js (main.js:9858), <anonymous>:69:22) 
    at module.exports (eval at ./node_modules/style-loader/addStyles.js (main.js:9858), <anonymous>:37:2) 
    at eval (eval at ./app/components/EntryGroup/styles.css (1.chunk.js:29), <anonymous>:7:77) 
    at Object../app/components/EntryGroup/styles.css (1.chunk.js:29) 
    at __webpack_require__ (main.js:687) 
    at fn (main.js:106) 
    at eval (eval at ./app/components/EntryGroup/index.js (1.chunk.js:22), <anonymous>:3:70) 

style-loader은 오류를 던지고있는 것처럼 보입니다. 그러나 나는 css-loader을 통해이를 무시해야하기 때문에 오류라고 가정합니다. 그 외에는 어디를보아야할지 모르겠다.

제안 사항?

Answer 1

나는 CSS 모듈과 웹팩 (2)를 사용하고, 나는 new webpack.NamedModulesPlugin()을 추가하려고 할 때까지 잘 작동했다. 사용중인 경우 CSS 모듈이 작동하는지 확인하고 제거하십시오.

Answer 2

동일한 정확한 문제가 있습니다. 나는 로더에 대해 동일한 구성을 가지고 있으며, 현재 문제를 해결하는 유일한 방법은 "ExtractTextPlugin"을 사용하는 것입니다. ExtractTextPlugin을 개발 용으로 사용하는 것은 좋지 않지만 컴파일 시간이 느려지므로 지금은 다른 해결책이 없습니다. 다음 설정을 사용하면 모든 것이 매력처럼 작동합니다.

module: { 
    rules: [ 
     // CSS 
     { 
      test: /\.css$/, 
      include: path.join(__dirname, 'src'), 
      use: ExtractTextPlugin.extract({ 
       fallback: 'style-loader', 
       use: 'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]!postcss-loader' 
      }) 
     } 
    ] 
}, 
plugins: [ 
    new ExtractTextPlugin({ 
     filename: 'bundle.min.css', 
     allChunks: true 
    }) 
]