webpack의 scss 관련 구성에 대한 자세한 소개

이 글에서는 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']
}

위 내용은 제가 모든 사람을 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

JS는 바이너리 데이터를 작동하는 방법을 구현합니다.

vue2.0의 swiper 구성 요소를 사용하여 캐러셀 구현(자세한 튜토리얼)

Vue에서 Compass를 사용하는 구체적인 방법은 무엇입니까?

Vue 계산 속성의 캐싱 기능을 끄는 방법은 무엇입니까?

위 내용은 webpack의 scss 관련 구성에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!