Detaillierte Einführung in die entsprechende Konfiguration von scss im Webpack

Dieser Artikel stellt hauptsächlich die detaillierte Konfiguration von scss und postcss-loader im Webpack vor. Jetzt teile ich ihn mit Ihnen und gebe ihn als Referenz.

Dieser Artikel stellt die detaillierte Konfiguration von scss und postcss-loader im Webpack vor und teilt sie mit allen. Die Details sind wie folgt:

Start

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

Konfigurieren Sie zuerst den Postcss-Loader

Hier dient Postcss dazu, dem Browserkernel ein privates Präfix 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']
}

Das Obige ist das, was ich für alle zusammengestellt habe alle in der Zukunft.

Verwandte Artikel:

JS implementiert Methode zum Betrieb von Binärdaten

Verwendung der Swiper-Komponente in vue2.0 zum Implementieren eines Karussells (ausführlich Tutorial)

Welche spezifischen Methoden gibt es für die Verwendung von Compass in Vue?

Wie deaktiviere ich die Caching-Funktion von Vue-berechneten Eigenschaften? Was sind die spezifischen Schritte?

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in die entsprechende Konfiguration von scss im Webpack. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!