Webpack での scss の関連設定の詳細な紹介

この記事では主に webpack の scss と postcss-loader の詳細な設定を紹介し、参考として提供します。

この記事では、webpack での scss と postcss-loader の設定を紹介し、皆さんと共有します。詳細は次のとおりです:

始めに postcss-loader を設定します

ここで postcss は、ブラウザカーネル プライベートプレフィックスを追加します。現在、postcss には px2rem などの他の操作があります。 postcss は、babel-core が単なるコントロール センターであり、主なものはその散在するプラグインであると考えることができます。

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

scss設定

はルールを追加するだけです

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

上記は、皆さんのためにまとめたものです。将来皆さんのお役に立てれば幸いです。

関連記事:

js はバイナリデータを操作するメソッドを実装します

vue2.0 の Swiper コンポーネントを使用してカルーセルを実装する (詳細なチュートリアル)

Vue で Compass を使用する具体的な方法は何ですか?

Vue の計算プロパティのキャッシュ機能をオフにする方法具体的な手順は何ですか?

以上がWebpack での scss の関連設定の詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。