Как я могу получить кучу файлов Scss и сделать один файл CSS для всех приложений - PullRequest
Новая
       29

Как я могу получить кучу файлов Scss и сделать один файл CSS для всех приложений

0 голосов
/ 20 декабря 2018

У меня есть webpack.config и я не знаю, какой модуль мне нужно разместить в нем, потому что я нашел модули, которые только минимизируют файлы CSS или SCSS, но не собирают их.

Итак, яиметь 8-9 файлов scss и нужен один файл css, который собирает весь код из них 

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

Какой модуль я должен установить, и где мне нужно поместить код в webpack.config.Пожалуйста, помогите, я никогда не работал с веб-пакетом! 

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"),
    ]
};

Это мой webpack.config

1 Ответ

0 голосов
/ 20 декабря 2018

веб-пакет работает не так, как глоток.Gulp - это средство запуска задач, которое может работать с globs и шаблонами файлов.Webpack - это пакет, который анализирует дерево зависимостей с учетом ваших точек входа, чтобы иметь возможность создавать ваши пакеты.

Чтобы работать с веб-пакетом и связывать все файлы scss, их нужно будет импортировать куда-то из вашеготочка входа.Только так веб-пакет узнает, что эти файлы существуют.

Редактировать: Исправить конфигурацию. 

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()
    ]
};
...