Can Webpack proccess nested css in Handlerbars template

Question

i'm working in little project, i use webpack for generate the bundle packs of my js and css code all is fine, but i trying to do a web component that import the css style i read here that i can use a common <link rel="stylesheet" href="yourcss1.css"> inside of template for import the style but the problem with that is when webpack build the bundles can move the css file to dist folder, how can i configure webpack for read the css file nested in template and move to dist folder.

here my config webpack.config.js :

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const webpackConfig = {
    entry: {
        home: ['@babel/polyfill', './src/js/home/home.js', 
       './src/sass/home/home.scss'],
        signup: ['@babel/polyfill', './src/js/signup/signup.js', './src/sass/signup/signup.scss'],
        me: ['@babel/polyfill', './src/js/me/me.js', './src/sass/me/me.scss']
    },
    devtool: 'source-map',
    output: {
        path: __dirname + '/dist',
        filename: 'js/[name].bundle.js?v=[hash]',
    },
    mode: 'development',
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                        plugins: ['@babel/plugin-proposal-class-properties', '@babel/plugin-transform-react-jsx']
                    }
                }
            },
            {
                test: /\.html$/,
                use: ['html-loader']
            }, 
            { test: /\.hbs$/,
                loader: "handlebars-loader"
            },
            {
                test: /\.scss$/,
                use: [
                    'to-string-loader',
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader',
                ]
            },
            {
                test: /\.(gif|png|jpe?g|svg)$/i,
                use: [{
                    loader: 'file-loader',
                    options: {
                        context: '',
                        name: '[hash]-[name].[ext]',
                        outputPath: './img',
                        publicPath: '/img'
                    }
                }]
            },
            {
                test: /\.css$/i,
                use: [{
                    loader: 'file-loader',
                    options: {
                        context: '',
                        name: '[hash]-[name].[ext]',
                        outputPath: './img',
                        publicPath: '/img'
                    }
                }]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "css/[name].css?v=[hash]",
            chunkFilename: "[id].css"
        }),
        new CleanWebpackPlugin('./dist/')
    ],
    resolve: {
        modules: [
            path.resolve('./'),
            path.resolve('./node_modules'),
        ]
    },
    watch: process.env.NODE_ENV !== 'production',
    optimization: {
        splitChunks: {
            cacheGroups: {
                commons: {
                    test: /[\\/]node_modules[\\/]/,
                    name: "vendor",
                    chunks: "initial"
                }
            }
        }
    },
    devServer: {
        // Display only errors to reduce the amount of output.
        stats: "errors-only",
        compress: true,
        contentBase: path.join(__dirname, 'dist'),
        host: process.env.HOST, // Defaults to `localhost`
        port: process.env.PORT, // Defaults to 8080
        open: 'http://localhost:8080/home.html', // Open the page in browser
    },
};
Object.keys(webpackConfig.entry).forEach((file) => {
    webpackConfig.plugins.push(
        new HtmlWebpackPlugin({
            filename: `${file}.html`,
            template: `src/template/${file}.html`,
            chunks: ['vendor', file.replace(/-(\w)/g, (match, c) => c.toUpperCase())]
        })
    );
});
module.exports = webpackConfig;

MagicTable.hbs

<link type="text/css" rel="stylesheet" href="MagicTable.scss">
<div id="message-table" class="table">
    <div class="table-header">
        <div class="row">
            <div class="column col-email"><a href="#">Email</a></div>
            <div class="column col-message"><a href="#">Message</a></div>
            <!--<div class="column col-actions"><a href="#">Actions</a></div>-->
            <div class="column col-status"><a href="#">Estatus</a></div>
        </div>
    </div>
    <div class="table-content">
        <div class="row js-message-row">
            <div class="column col-email"><p>[email protected]</p></div>
            <div class="column col-message"><p>I want to play...</p></div>
            <!--<div class="column col-actions">&nbsp;</div>-->
            <div class="column col-status"><span class="status-circle circle-green"></span>
                <p class="green-text">Accepted</p></div>
        </div>
        <div class="row js-message-row">
            <div class="column col-email"><p>[email protected]</p></div>
            <div class="column col-message"><p>ASASFARGA</p></div>
            <!--<div class="column col-actions">&nbsp;</div>-->
            <div class="column col-status"><span class="status-circle circle-red"></span>
                <p class="red-text">Rejected</p></div>
        </div>
        <div class="row js-message-row">
            <div class="column col-email"><p>[email protected]</p></div>
            <div class="column col-message"><p>ASASFARGA</p></div>
            <div class="column col-status"><span class="status-circle circle-orange"></span>
                <p class="orange-text">Pending</p></div>
        </div>
    </div>
</div>

MagicTable.js

import template from './MagicTable.hbs';
class MagicTable extends HTMLElement {
    constructor() {
        super();
        let shadowRoot = this.attachShadow({mode: 'open'});
        shadowRoot.innerHTML = template({});
    }
}
//export default MagicTable
customElements.define('magic-table', MagicTable);

Answer 1

For process <link rel="stylesheet" href="src/compontent/componentA.css"> nested in the component template and translate to <link rel="stylesheet" href="css/componentA.css">, just need to add these loader after 'handlerbars-loader' that was excract the css files for process.

{
            test: /\.hbs$/,
            use: [
                {
                    loader: "handlebars-loader",
                },
                {
                    loader: 'extract-loader'
                },
                {
                    loader: 'html-loader',
                    options: {
                        attrs: ["img:src", "link:href"],
                    }
                }]
        }

now for process css link you need to add :

{
            test: /\.css$/,
            loaders: [
                {
                    loader: "file-loader",
                    options: {
                        name: "css/[name].css?v=[hash]".toLocaleLowerCase(),
                    },
                },
                {
                    loader: "extract-loader",
                    options: {
                        publicPath: "../css",
                    }
                },
                {
                    loader: "css-loader",
                },
                {
                    loader: 'sass-loader'
                },
            ],
        },

here complete webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const webpackConfig = {
    entry: {
        home: ['@babel/polyfill', './src/js/home/home.js', './src/sass/home/home.scss'],
        signup: ['@babel/polyfill', './src/js/signup/signup.js', './src/sass/signup/signup.scss'],
        me: ['@babel/polyfill', './src/js/me/me.js', './src/sass/me/me.scss']
    },
    devtool: 'source-map',
    output: {
        path: __dirname + '/dist',
        filename: 'js/[name].bundle.js?v=[hash]',
    },
    mode: 'development',
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                        plugins: ['@babel/plugin-proposal-class-properties', '@babel/plugin-transform-react-jsx']
                    }
                }
            },
            {
                test: /\.html$/,
                use: ['html-loader'],
            },
            {
                test: /\.hbs$/,
                use: [
                    {
                        loader: "handlebars-loader",
                    },
                    {
                        loader: 'extract-loader'
                    },
                    {
                        loader: 'html-loader',
                        options: {
                            attrs: ["img:src", "link:href"],
                        }
                    }]
            },
            {
                test: /\.scss$/,
                exclude: /components/,
                use: [
                    'to-string-loader',
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader',
                ]
            },
            {
                test: /\.(gif|png|jpe?g|svg)$/i,
                use: [{
                    loader: 'file-loader',
                    options: {
                        context: '',
                        name: '[hash]-[name].[ext]',
                        outputPath: './img',
                        publicPath: '/img'
                    }
                }]
            },
            {
                test: /\.css$/,
                loaders: [
                    {
                        loader: "file-loader",
                        options: {
                            name: "css/[name].css?v=[hash]".toLocaleLowerCase(),
                        },
                    },
                    {
                        loader: "extract-loader",
                        options: {
                            publicPath: "../css",
                        }
                    },
                    {
                        loader: "css-loader",
                    },
                    {
                        loader: 'sass-loader'
                    },
                ],
            },
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "css/[name].css?v=[hash]",
            chunkFilename: "[id].css"
        }),
        new CleanWebpackPlugin('./dist/')
    ],
    resolve: {
        modules: [
            path.resolve('./'),
            path.resolve('./node_modules'),
        ]
    },
    watch: process.env.NODE_ENV !== 'production',
    optimization: {
        splitChunks: {
            cacheGroups: {
                commons: {
                    test: /[\\/]node_modules[\\/]/,
                    name: "vendor",
                    chunks: "initial"
                }
            }
        }
    },
    devServer: {
        // Display only errors to reduce the amount of output.
        stats: "errors-only",
        compress: true,
        contentBase: path.join(__dirname, 'dist'),
        host: process.env.HOST, // Defaults to `localhost`
        port: process.env.PORT, // Defaults to 8080
        open: 'http://localhost:8080/home.html', // Open the page in browser
    },
};
Object.keys(webpackConfig.entry).forEach((file) => {
    webpackConfig.plugins.push(
        new HtmlWebpackPlugin({
            filename: `${file}.html`,
            template: `src/template/${file}.html`,
            chunks: ['vendor', file.replace(/-(\w)/g, (match, c) => c.toUpperCase())]
        })
    );
});

module.exports = webpackConfig;