webpack의 scss 관련 구성에 대한 자세한 소개-JS 튜토리얼-php.cn

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

亚连

풀어 주다： 2018-06-12 17:56:26

원래의

2015명이 탐색했습니다.

이 글에서는 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: &#39;style-loader&#39;,
   use: [&#39;css-loader&#39;, &#39;postcss-loader&#39;, &#39;sass-loader&#39;]
  })
}
/**** dev.js ****/
{
  test: /\.scss$/,
  use: [&#39;style-loader&#39;, &#39;css-loader&#39;, &#39;postcss-loader&#39;, &#39;sass-loader&#39;]
}

로그인 후 복사

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