webpack에서 CSS/Autoprefixer가 작동하지 않음을 비활성화하십시오.

webpack에 새로 입했으나 현재 웹팩에서 사용하지 않을 문서 본문에 스타일을 삽입하고 있습니다. 나는 이것을 성취하는 방법을 잘 모른다. 당신이 아직도 내가 가지고있는 SCS들 파일과 일치하지 않습니다 CSS를 주입 볼 수 있듯이webpack에서 CSS/Autoprefixer가 작동하지 않음을 비활성화하십시오.

가 여기 내 webpack.config.js

입니다

var webpack = require('webpack'); 
var autoprefixer = require('autoprefixer'); 
var ExtractTextPlugin = require("extract-text-webpack-plugin"); 

module.exports = { 
    output: { 
     filename: 'bundle.js' 
    }, 
    entry: { 
     app: './js/app.js' 
    }, 

    module: { 
     loaders: [ 
      { 
       test: /\.scss$/, 
       loader: ExtractTextPlugin.extract({use:[{loader: 'css-loader', options: {importLoaders: 1}}, 'postcss-loader', 'sass-loader']}) 
      } 
     ] 
    }, 
    plugins: [ 
     new ExtractTextPlugin('styles.css'), 
     new webpack.LoaderOptionsPlugin({options: { 
      context: __dirname, 
      postcss: [ 
       autoprefixer 
      ] 
     }}) 
    ] 
};

HTML 출력은

<html> 
    <head> 
     <title>Test</title> 
     <link rel="stylesheet" href="/wp-content/themes/index/styles.css"> 
     <style type="text/css"> 
      body { 
      background-color: black; } 

      h1 { 
       color: #fff; } 

      p { 
       display: flex; 
       color: #fff; } 
     </style> 
     <style type="text/css"></style> 
    </head> 
    <body> 
     <h1>Test</h1> 
     <p>Test</p> 
     <script src="/wp-content/themes/index/dist/bundle.js"></script> 
    </body> 
</html>

입니다. 또한 flex 속성 접두어가 아니거나 내 sass 파일에있는 가져 오기를 포함하지 않습니다.

main.scss

@import 'test'; 

body { 
    background-color: black; 
} 

h1 { 
    color: #fff; 
} 

p { 
    display: flex; 
    color: #fff; 
    background-color: red; 
}

_test.scss

구성으로 해결해야 할 세 가지 문제가 있습니다

h2 { 
    color: blue; 
}

출처

2017-11-29 dnaluz

Euuuh ... 당신은 scss loader 인 하나의 로더 만 가지고 있습니다 ... 정확히 무엇을 기대합니까? – briosheje

먼저 module 내부의 loaders 속성은 rules으로 바꿔야합니다. 당신이 지금 가지고있는 방식은 webpack 1을위한 올바른 방법이었고, webpack 2+는 rules을 사용했습니다. https://webpack.js.org/guides/migrating/#module-loaders-is-now-module-rules

두 번째로 LoaderOptionsPlugin은 webpack 1에서 webpack 2로 마이그레이션하는 데 사용되었습니다.이 파일에 대한 내용은 here입니다.

postcss-loader에 옵션을 연결하는 새로운 권장 방법은 다음과 같습니다. 대신에 위의 구성으로

{ 
    loader: 'postcss-loader', 
    options: { 
     plugins: [autoprefixer()] 
    } 
}

, 당신의 CSS는 접두사해야하고 안전하게 plugins 배열에서 webpack.LoaderOptionsPlugin을 제거 할 수 있습니다. 위 제공된 정보가 정확한지

마지막으로, _test.scss 그것이 _test을 가져 당신이 볼 수 main.scss 당신이

@import 'test';

변경이 있기 때문에 최종 번들에 포함되지 않는 그것은 번들에 포함 .

출처

2017-11-29 20:34:28 KyTrol

webpack에서 CSS/Autoprefixer가 작동하지 않음을 비활성화하십시오.

답변

관련 문제