[簡易メモ]webpackのautoprefixerが共通scssで効かなかったので対応

現象

autoprefixer

https://github.com/postcss/autoprefixer
公式通り設定したが、
各module.scssの記述は反映されるが、
共通scssの記述が反映されなかった。

環境

"webpack": "5.53.0
"autoprefixer": "^10.3.5",
"css-loader": "^5.2.7",
"postcss-scss": "^4.0.0",
"postcss": "^8.3.7",
"sass": "^1.42.1",
"sass-loader": "^12.1.0",

構成.md

 root
 ┣ app
 │ ┣ src
 │ │ ┣ components
 │ │ │ ┣ hoge.module.scss
 │ │ │ └ hoge.tsx 
 │ │ └ styles
 │ │   ┣ common.scss
 │ │   └ _global-variables.scss
 │ └ webpack
 │   └ webpack.config.js
 ┣ package.json
 └ postcss.config.js  

webpack.config.js

 const path = require('path');
 const BASE_PATH = path.resolve(__dirname, '..');
 
 module.exports = {
   // 省略
   module: {
     rules: [
       {
         test: /.(sass|scss|css)$/,
         use: [
           {
             loader: 'css-loader',
             options: {
               modules: { /* 省略 */ },
               importLoaders: 2,
             },
           },
           {
             loader: 'sass-loader',
             options: {
               additionalData: '@import "global-variables";',
               sassOptions: {
                 includePaths: [path.resolve(BASE_PATH, 'src/styles')],
               },
             },
           },           
           {
             loader: 'postcss-loader',
             options: { plugins: [autoprefixer] },
           },
         ]
       }
     ]
   }
 }

common.scss

body {
  text-size-adjust: 100%;
}

hoge.module.scss の autoprefixer は効いていたが
common.scss の autoprefixer が効いていなかった

修正

'sass-loader'を'postcss-loader'の下に記述
loaderは下から実行されるらしい

webpack.config.js

 const path = require('path');
 const BASE_PATH = path.resolve(__dirname, '..');
 
 module.exports = {
   // 省略
   module: {
     rules: [
       {
         test: /.(sass|scss|css)$/,
         use: [
           {
             loader: 'css-loader',
             options: {
               modules: { /* 省略 */ },
               importLoaders: 2,
             },
           },
           {
             loader: 'postcss-loader',
             options: { plugins: [autoprefixer] },
           },
           {
             loader: 'sass-loader',
             options: {
               additionalData: '@import "global-variables";',
               sassOptions: {
                 includePaths: [path.resolve(BASE_PATH, 'src/styles')],
               },
             },
           }
         ]
       }
     ]
   }
 }