Maison > Article > interface Web > 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: 'style-loader', - use: 'css-loader' + use: ['css-loader', 'postcss-loader', 'sass-loader'] }) } /**** dev.js开发环境 ****/ // 其实个人认为在开发环境可加可不加 { test: /\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] },
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!