Konfigurationsmethoden für den SCSS- und PostCSS-Loader des Webpacks

In diesem Artikel wird hauptsächlich die detaillierte Konfiguration von scss und postcss-loader im Webpack vorgestellt. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Starten

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

Zuerst den Postcss-Loader konfigurieren

hier Postcss wird verwendet, um private Präfixe zum Browserkernel hinzuzufügen. Derzeit verfügt Postcss über andere Operationen wie px2rem. Sie können sich Postcss als Babel-Core vorstellen, es ist nur ein Kontrollzentrum, die Hauptsache sind die verstreuten Plug-Ins.

/**** 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-Konfiguration

ist nichts anderes als das Hinzufügen von Regeln

/**** 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']
}

Verwandte Empfehlungen:

Detaillierte Erklärung zur Unterstützung von SCSS in Angular

Implementierung des Maskenebeneneffekts für mobile Seiten von SCSS und häufige Probleme Lösung

CSS- und Sass (SCSS)-Entwicklungsspezifikationen

Das obige ist der detaillierte Inhalt vonKonfigurationsmethoden für den SCSS- und PostCSS-Loader des Webpacks. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!