Question

我正在从gulp转换为webpack，并且在编译SASS时遇到一些问题。

我设法不放入内联（尽管我想选择是否需要内联，但在解决此问题后会进行处理）。

所以我有2个.scss文件，我需要分别导入这些文件并分别创建它们，并且不要在.html文件中自动导入。

我尝试过：

输入：[]方法，
尝试过ExtractTextPlugin.extract和
使用MiniCssExtractPlugin。
我搜索了很多内容，但收效不佳。

我当前的webpack.config.js：

const HtmlWebPackPlugin = require("html-webpack-plugin");
//const ExtractTextPlugin = require('extract-text-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
//const UglifyJsPlugin = require("uglifyjs-webpack-plugin");

module.exports = (env, options) => {
  //const isDevMode = options.mode === "development";
  return {

    module: {

      rules: [{
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: "babel-loader"
          }
        },
        {
          test: /\.html$/,

          use: [{
                loader: "html-loader",
                  options: {
                    minimize: true,
                    conservativeCollapse: false,
                    removeScriptTypeAttributes: false,
                    removeStyleTypeAttributes: false,
                  }
              }]

        },

        {
          test: /\.scss$/,
          //use: ExtractTextPlugin.extract({
              use: [
                { loader: MiniCssExtractPlugin.loader },
                {
                  loader: "css-loader",
                  options: {
                    minimize: true
                  }
                },
                {
                  loader: "postcss-loader",
                  options: {
                    plugins: [
                      require("autoprefixer")(),
                      require('cssnano')({
                        preset: 'default', 
                            discardComments: {
                              removeAll: true,
                            }
                      })
                    ],
                  }
                },
                {
                  loader: "sass-loader",
                }
              ]
          //})
        },
      ]
    },
    plugins: [
      new HtmlWebPackPlugin({
        template: "./src/index.html",
        filename: "./index.html"
      }),
      new MiniCssExtractPlugin({
        // Options similar to the same options in webpackOptions.output
        // both options are optional
        filename: "[name].[hash].css",
        chunkFilename: "[id].css"
      })
    ]
  };
};

文件，用于从以下位置创建.css：

./src/css/styles.scss
./src/css/teste.scss

预期结果应该是

./dist/assets/css/styles.css
./dist/assets/css/teste.css

webpack SASS捆绑并创建多个文件

0 个答案: