How does webpack3 merge and package multiple scss files into a single css file?

problem description

this is my directory structure. I want to merge all the scss files under the css2 folder into one css file and package them to the build directory
clipboard.png

extractTextPluginscss
scssscssjsimport
100scssscss
clipboard.png

.

configuration file

const path = require("path");
const glob = require("glob");
const htmlPlugin = require("html-webpack-plugin");
const extractTextPlugin = require("extract-text-webpack-plugin");
const webpack = require("webpack");


var imJsFile = glob.sync("./im/js/core2/**/*.js");


var config = {
    entry:{
        entry:imJsFile
    },
    output:{
        path:path.resolve(__dirname,"build/im"),
        filename:"./js/sp.im.min.js"
    },
    devServer:{
        contentBase:path.resolve(__dirname,"build"),
        host:"localhost",
        compress:true,
        port:1717
    },
    module:{
        rules:[
            
            {
                test: /\.scss$/,
                use: extractTextPlugin.extract({
                    use: [{
                        loader: "css-loader"
                    }, {
                        loader: "sass-loader"
                    }],
                    fallback: "style-loader"
                })
             }
        ]
    },
    plugins:[
        new webpack.ProvidePlugin({
            jQuery:"jquery"
        }),
        new extractTextPlugin("/css/[name].css")
    ]
};

var viesObj = getView("im/view/onlineservice/chat2/*.html");
var pages = Object.keys(viesObj);
pages.forEach(function(pathname) {
    var htmlName = viesObj[pathname]
    var conf = {
        filename: "./view/" + htmlName + ".html", //htmlpath
        template: "./im/view/onlineservice/chat2/" + htmlName + ".html", //html
        hash: true, //hash
        //chunks: ["common",htmlName],//chunk
        minify: { //HTML    
            removeAttributeQuotes:true, //
            removeComments: true, //HTML
            collapseWhitespace: false //
        }
    };
    config.plugins.push(new htmlPlugin(conf));
});


module.exports = config;

function getView(globPath, pathDir) {
    var files = glob.sync(globPath);
    var entries = {},
        entry, dirname, basename, pathname, extname;

    for (var i = 0; i < files.length; iPP) {
        entry = files[i];
        dirname = path.dirname(entry);  //  
        extname = path.extname(entry);  //
        basename = path.basename(entry, extname);  //  "/" path,entryextname 
        pathname = path.join(dirname, basename);    // path
        pathname = pathDir ? pathname.replace(new RegExp("^" + pathDir), "") : pathname;
        entries[pathname] =  basename;
    }
    return entries;
}

I want to know how to package several scss files into the build directory

Apr.02,2021

webpack.config.js is configured as follows
var ExtractTextPlugin = require ("extract-text-webpack-plugin"); / / extract-text-webpack-plugin installs this plugin
module: {
loaders: [
{test: / .css$/, loader: ExtractTextPlugin.extract ("style-loader", "css-loader")}
]
},
plugins: [
new ExtractTextPlugin ("css/ [name] .css") / / will generate a css file
]
for example, you can introduce it into your js file as follows:
import'. / css/lib/bootstrap.min.css'
import'/ css/test.css';.


the problem lies in the process of merging scss files. I want to merge all scss files. Can I only import in the js entry file?
not only in the entry file import, but also in all the files that will be packaged, you can also import
as long as you make sure that the scss file is used, a chain will be packaged


won't you import in scss?

Menu