Webpack 将 scss 编译为 css 并缩小

Posted 2023-03-06

【中文标题】Webpack 将 scss 编译为 css 并缩小

【英文标题】：Webpack compile scss to css and minify

【发布时间】：2019-12-05 23:08:42

【问题描述】：

我是 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
                
            ]
        ]
    
;

我不知道在哪里放置包含文件的路径以及在哪里放置输出路径。

如果您有任何建议，我将不胜感激。

【问题讨论】：

显示您的webpack.config.js，到目前为止您尝试了什么？使用sass-loader 有什么问题？

@GProst 感谢您的评论。添加到原帖中。

【参考方案1】：

如果您只是希望能够从您的 javascript 模块中导入 .scss 文件并将其直接应用于 DOM，您可以先按照此文档进行操作：

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

然后将Postcss 添加到组合中：

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

tldr;

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

【讨论】：

这就像我的推荐

【参考方案2】：

你可以使用我的配置来做到这一点。我正在使用optimize-css-assets-webpack-plugin

你可以查看我的完整配置here

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 运行 minify 命令