Webpack将scss编译为css并进行压缩

Question

我对 webpack 很新，我正在努力学习如何将 scss 转换为 css 然后再压缩。

文件结构

 public
     ┣ dist
     ┃ ┣ css
     ┃ ┗ js
     ┃ ┃ ┗ adminMain.js
     ┣ src
     ┃ ┣ css
     ┃ ┃ ┃ ┣ admin.css
     ┃ ┃ ┃ ┣ admin.css.map
     ┃ ┃ ┃ ┣ admin.scss
     ┃ ┃ ┃ ┣ main.css
     ┃ ┃ ┃ ┣ main.css.map
     ┃ ┃ ┃ ┗ main.scss
     ┃ ┗ js
     ┃ ┃ ┗ adminMain.js

我这样编译JS

"dev": "webpack --mode development ./public/src/js/adminMain.js --output ./public/dist/js/adminMain.js",
"build": "webpack --mode production ./public/src/js/adminMain.js --output ./public/dist/js/adminMain.js"

我发现类似 sass-loader 这样的东西，但无法使其正常工作。

webpack.config.js

module.exports = {
    module: {
        rules: [{
            test: /\.scss$/,
            use: [{
                loader: "sass-loader",
                options: {
                    minimize: true
                }
            }]
        }]
    }
};

我不知道将包含文件的路径和输出文件的路径放在哪里。

我将非常感激任何建议。

- user9817924

---

展示你的 webpack.config.js，你到目前为止尝试了什么？使用 sass-loader 存在什么问题？ - GProst

@GProst 感谢您的评论。已添加到原始帖子中。 - user9817924

Answer 1

如果您只想从JavaScript模块中导入.scss文件并直接应用于DOM，则可以首先按照此文档进行操作：

https://webpack.js.org/loaders/sass-loader/

然后将 Postcss 加入混合物中：

https://github.com/postcss/postcss-loader

简而言之;

npm install sass-loader node-sass style-loader css-loader postcss-loader cssnano --save-dev

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader', // creates style nodes from JS strings
          {
            loader: 'css-loader', // translates CSS into CommonJS
            options: {
              importLoaders: 1
            }
          },
          'postcss-loader', // post process the compiled CSS
          'sass-loader' // compiles Sass to CSS, using Node Sass by default
        ]
      }
    ]
  }
};

// postcss.config.js
module.exports = {
  plugins: {
    'cssnano': {}
  }
};

如果您想将编译后的CSS提取到单独的文件中，可以使用以下方法：

https://github.com/webpack-contrib/mini-css-extract-plugin

特别是：

https://github.com/webpack-contrib/mini-css-extract-plugin#advanced-configuration-example

- madflow

---

这就像我的推荐一样。 - Tony Ngo

Answer 2

你可以使用我的配置来实现这一点。我正在使用 optimize-css-assets-webpack-plugin 您可以在此处查看我的完整配置。

const path = require("path");
const webpack = require("webpack");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CompressionPlugin = require("compression-webpack-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const WebpackShellPlugin = require('webpack-shell-plugin');
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");

process.traceDeprecation = true;

module.exports = {
    output: {
        path: path.resolve(__dirname, "wwwroot/dist"),
        filename: "[name].js",
        publicPath: "/dist/"
    },
    optimization: {
        minimizer: [
            new UglifyJsPlugin({
                cache: true,
                parallel: true,
                sourceMap: false,
                extractComments: 'all',
                uglifyOptions: {
                    compress: true,
                    output: null
                }
            }),
            new OptimizeCSSAssetsPlugin({
                cssProcessorOptions: {
                    safe: true,
                    discardComments: {
                        removeAll: true,
                    },
                },
            })
        ]
    },
    plugins: [
        new webpack.ContextReplacementPlugin(/\.\/locale$/, 'empty-module', false, /jsx$/),
        new webpack.LoaderOptionsPlugin({
            options: {}
        }),
        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: "[id].css"
        }),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            Popper: ['popper.js', 'default']
        }),
        new CompressionPlugin({
            test: /\.(js|css)/
        }),
        new UglifyJsPlugin(),
        new WebpackShellPlugin({
            onBuildStart: ['echo "Starting postcss command"'],
            onBuildEnd: ['postcss --dir wwwroot/dist wwwroot/dist/*.css']
        })
    ],
    resolve: {
        modules: [
            path.resolve('./React/js/App'),
            path.resolve('./React/js/App/Modules/Client'),
            path.resolve('./React/js/App/Modules/Adnmin'),
            path.resolve('./node_modules')
        ]
    },
    module: {
        rules: [{
                test: /\.scss$/,
                use: [
                    'style-loader',
                    MiniCssExtractPlugin.loader,
                    {
                        loader: "css-loader",
                        options: {
                            minimize: true,
                            sourceMap: true
                        }
                    },
                    {
                        loader: "sass-loader"
                    }
                ]
            }
        ]
    }
};

但我建议您使用postcss来最小化CSS。 我正在使用WebpackShellPlugin运行最小化命令

- Tony Ngo