javascript - 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
                }
            }]
        }]
    }
};

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

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

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