CODEWITHSUNDEEP
csswebpacksassgulp
PawMaw
PawMaw

Reputation: 111

How can I grab bunch of scss files and make one css file for all application

I've got webpack.config and don't know what module I need to place in it, cause I found modules, whitch only minimises css or scss files, but not collecting them.

So I have 8-9 scss files, and need one css file, which collects all code from them

var path = require('path');
module.exports = {
    entry: {
        home: './src/main/js/home/home.js',
        products: './src/main/js/products/products.js',
        product: './src/main/js/product/product.js',
        profile: './src/main/js/profile/profile.js',
        topics: './src/main/js/topics/topics.js',
        topic: './src/main/js/topic/topic.js',

    },
    cache: true,
    mode: 'development',
    output: {
        path: __dirname,
        filename: './src/main/resources/static/built/[name].bundle.js'

    },
    module: {
        rules: [
            {
                test: path.join(__dirname, '.'),
                exclude: /(node_modules)/,
                use: [{
                    loader: 'babel-loader',
                    options: {
                        presets: ["@babel/preset-env", "@babel/preset-react"]
                    }
                }]
            }
        ]
    }
};

What module I Should install, and where I need to put code in webpack.config. Please help, I've never worked with webpack!

var path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    entry: {
        home: './src/main/js/home/home.js',
        products: './src/main/js/products/products.js',
        product: './src/main/js/product/product.js',
        profile: './src/main/js/profile/profile.js',
        topics: './src/main/js/topics/topics.js',
        topic: './src/main/js/topic/topic.js',
        _article: './src/main/resources/static/sass/_article.scss',
        _catalog: './src/main/resources/static/sass/_catalog.scss',
        _home: './src/main/resources/static/sass/_home.scss',
        _header: './src/main/resources/static/sass/_header.scss',
        _footer: './src/main/resources/static/sass/_footer.scss',

    },
    cache: true,
    mode: 'development',
    output: {
        path: __dirname,
        filename: './src/main/resources/static/built/[name].bundle.js'

    },
    module: {
        rules: [
            {
                test: [ /\.scss$/, path.join(__dirname, '.')],
                exclude: /(node_modules)/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: ['css-loader', 'sass-loader']
                })[{
                    loader: 'babel-loader',
                    options: {
                        presets: ["@babel/preset-env", "@babel/preset-react"]
                    }
                }]
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin("styles.css"),
    ]
};

That'smy webpack.config

Upvotes: 0

Views: 150

Answers (1)

PlayMa256
PlayMa256

Reputation: 6841

webpack works different than gulp. Gulp is a task runner, which can work with globs and file patterns. Webpack is a bundler, which analyses the dependency tree given your entry points to be able to create your bundles.

In order to work with webpack, and bundle all scss files, they would need to be imported somewhere from your entry point. That is the only way that webpack will know these files exist.

Edit: Correct config.

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    entry: {
        home: './src/main/js/home/home.js',
        products: './src/main/js/products/products.js',
        product: './src/main/js/product/product.js',
        profile: './src/main/js/profile/profile.js',
        topics: './src/main/js/topics/topics.js',
        topic: './src/main/js/topic/topic.js',
        _article: './src/main/resources/static/sass/_article.scss',
        _catalog: './src/main/resources/static/sass/_catalog.scss',
        _home: './src/main/resources/static/sass/_home.scss',
        _header: './src/main/resources/static/sass/_header.scss',
        _footer: './src/main/resources/static/sass/_footer.scss',

    },
    cache: true,
    mode: 'development',
    output: {
        path: __dirname,
        filename: './src/main/resources/static/built/[name].bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader'
                ]
            },
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ["@babel/preset-env", "@babel/preset-react"]
                    }
                }
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin()
    ]
};

Upvotes: 1

Related Questions