Introduction détaillée à la configuration associée de scss dans webpack

Cet article présente principalement la configuration détaillée de scss et postcss-loader dans webpack. Maintenant, je le partage avec vous et le donne comme référence.

Cet article présente la configuration détaillée de scss et postcss-loader dans webpack et le partage avec tout le monde. Les détails sont les suivants :

Démarrer

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

Configurez d'abord postcss-loader

Ici, postcss consiste à ajouter un préfixe privé au noyau du navigateur. Actuellement, postcss a d'autres opérations telles que px2rem. Vous pouvez considérer postcss comme babel-core n'est qu'un centre de contrôle, l'essentiel étant ses plug-ins dispersés.

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

Configuration scss

Ce n'est rien de plus que d'ajouter des règles

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

Ce qui précède est ce que j'ai compilé pour tout le monde, je l'espère sera utile à tout le monde à l'avenir. Utile.

Articles connexes :

JS implémente la méthode d'exploitation des données binaires

Utilisation du composant swiper dans vue2.0 pour implémenter le carrousel (détail tutoriel)

Quelles sont les méthodes spécifiques d'utilisation de Compass dans Vue ?

Comment désactiver la fonction de mise en cache des propriétés calculées de Vue ? Quelles sont les étapes spécifiques ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!