Méthodes de configuration du scss et du postcss-loader de Webpack

Cet article présente principalement la configuration détaillée de scss et postcss-loader dans webpack. L'éditeur pense que c'est plutôt bien, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

Démarrer

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

Configurez d'abord postcss-loader

ici postcss est utilisé pour ajouter des préfixes privés 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;]
},

la configuration scss

n'est rien de plus que l'ajout de 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']
}

Recommandations associées :

Explication détaillée de la façon de prendre en charge SCSS dans Angular

Implémentation de l'effet de couche de masque de page mobile SCSS et problèmes courants Solution

Spécifications de développement CSS et Sass (SCSS)

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!