webpack의 scss 및 postcss-loader 구성 방법

이 글에서는 webpack의 scss와 postcss-loader의 세부 구성을 주로 소개하고 있는데, 편집자가 꽤 좋다고 생각해서 지금 공유하고 참고용으로 올려보겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

Start

npm i sass-loader node-sass postcss-loader autoprefixer

먼저 postcss-loader를 구성하세요

여기서 postcss는 브라우저 커널에 개인 접두사를 추가하는 것입니다. 현재 postcss에는 px2rem과 같은 다른 작업이 있습니다. postcss를 babel-core는 단지 제어 센터라고 생각할 수 있습니다. 가장 중요한 것은 분산된 플러그인입니다.

/**** package.json ****/
// 指定你的前缀的兼容版本。
// 目前指定的只添加-webkit-, -ms-
// 你也可以兼容更低或者更高的的浏览器来增加或减少内核前缀的数量。
"browserslist": [
  "> 1%",
  "last 2 versions",
  "not ie <= 8"
]
/**** .postcssrc.js ****/
// 增加一个.postcssrc.js来指定postcss所使用的插件。就跟.babelrc类似
module.exports = {
 plugins:{
  "autoprefixer": {}
 }
}
/**** build.js生产环境 ****/
{
   test: /\.css$/,
   use: ExtractTextWebpackPlugin.extract({
   fallback: &#39;style-loader&#39;,
-    use: &#39;css-loader&#39;
+    use: [&#39;css-loader&#39;, &#39;postcss-loader&#39;, &#39;sass-loader&#39;]
   })
 }
/**** dev.js开发环境 ****/
// 其实个人认为在开发环境可加可不加
{
   test: /\.css$/,
   use: [&#39;style-loader&#39;, &#39;css-loader&#39;, &#39;postcss-loader&#39;]
},

scss 구성

은 규칙을 추가하는 것에 불과합니다

/**** build.js ****/
{
  test: /\.scss$/,
  use: ExtractTextWebpackPlugin.extract({
   fallback: 'style-loader',
   use: ['css-loader', 'postcss-loader', 'sass-loader']
  })
}
/**** dev.js ****/
{
  test: /\.scss$/,
  use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
}

관련 권장 사항:

Angular

SCSS 모바일에서 SCSS를 지원하는 방법에 대한 자세한 설명 페이지 마스크 오버레이 구현 효과 및 일반적인 문제에 대한 솔루션

CSS 및 Sass(SCSS) 개발 사양

위 내용은 webpack의 scss 및 postcss-loader 구성 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!