build: postcss 설정

- discard-dedupe
- autoprefixer

.eslintrc.cjs

@@ -5,7 +5,7 @@ module.exports = {
         "browser": true,
         "es2021": true
     },
-    ignorePatterns: ['*.test.ts', '.eslintrc.cjs', 'webpack.config.cjs', '*.js'],
+    ignorePatterns: ['*.test.ts', '.eslintrc.cjs', 'postcss.config.cjs', 'webpack.config.cjs', '*.js'],
     overrides: [{
         files: ['*.ts', '*.tsx', "*.vue"],
     }],

package.json

@@ -68,16 +68,21 @@
     "@typescript-eslint/parser": "^5.8.0",
     "@vue/compiler-sfc": "^3.2.26",
     "@vue/eslint-config-typescript": "^10.0.0",
+    "autoprefixer": "^10.4.1",
     "babel-plugin-lodash": "^3.3.4",
     "babel-preset-modern-browsers": "^15.0.2",
     "bootswatch": "^5.1.3",
     "clean-terminal-webpack-plugin": "^3.0.0",
     "css-loader": "^6.5.1",
+    "cssnano": "^5.0.14",
     "esbuild-loader": "^2.18.0",
     "eslint": "^8.5.0",
     "eslint-plugin-vue": "^8.2.0",
     "file-loader": "^6.2.0",
     "mini-css-extract-plugin": "^2.4.5",
+    "postcss-discard-duplicates": "^5.0.1",
+    "postcss-import": "^14.0.2",
+    "postcss-loader": "^6.2.1",
     "pre-commit": "^1.2.2",
     "sass": "^1.45.1",
     "sass-loader": "^12.4.0",

postcss.config.cjs

@@ -0,0 +1,7 @@
+module.exports = {
+    plugins: [
+        require('postcss-import'),
+        require('postcss-discard-duplicates'),
+        require('autoprefixer'),
+    ]
+}

webpack.config.cjs

@@ -160,11 +160,11 @@ module.exports = (env, argv) => {
                 },
                 {
                     test: /\.vue\.(s?[ac]ss)$/,
-                    use: ['vue-style-loader', 'css-loader', 'sass-loader']
+                    use: ['vue-style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
                 },
                 {
                     test: /(?<!\.vue)\.(s?[ac]ss)$/,
-                    use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
+                    use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader']
                 },
                 {
                     test: /\.(png|jpe?g|gif|webp)$/,
@@ -261,7 +261,7 @@ module.exports = (env, argv) => {
             },
             {
                 test: /.(s?[ac]ss)$/,
-                use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
+                use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader']
             },]
         },
         plugins: [
@@ -342,7 +342,7 @@ module.exports = (env, argv) => {
                 ]
             }, {
                 test: /.(s?[ac]ss)$/,
-                use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
+                use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader']
             }]
         },
         plugins: [