Конфигурация Webpack SCSS - PullRequest
Новая
       6

Конфигурация Webpack SCSS

0 голосов
/ 10 марта 2019

У меня есть следующие настройки веб-пакета: 

let config= {
    mode: 'development',
    entry:  {
        'templates': '/usr/local/var/www/project/src/ts/entry/templates.ts',
        'templates2': '/usr/local/var/www/project/src/ts/entry/templates2.ts',
        'main_scss': '/usr/local/var/www/project/src/sass/entry/main_scss.scss',
        'templates': '/usr/local/var/www/project/src/sass/entry/templates.scss'
    },
    output: {
        path:  path.resolve(__dirname, 'public/assets'),
        filename: '[name].bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.(ts)$/,
                use: [
                    'ts-loader',
                ],
            },
            {
                test: /\.(scss)$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader',
                ],

            },
        ]
    },
    plugins:[
        new MiniCssExtractPlugin({
            filename: "[name].css",
        })
    ]


};

Результатом является папка с файлом .js для каждого файла .ts и 2 файла для каждого файла .scss. (main_scss.scss приводит к main_scss.bundle.js и main_scss.css)

Почему? Я хотел бы, чтобы файлы .scss были упакованы только в .css.

Спасибо Ярон

1 Ответ

1 голос
/ 10 марта 2019

Это потому, что вы указали для нескольких выходных пакетов , , а именно по одному пакету на каждую точку входа. Кроме того, каждый пакет должен иметь с уникальным именем на основе имени файла каждой точки входа, как указано в следующей строке кода:

filename: '[name].bundle.js'.

'[name]' будет динамически заменять базовое имя файла для каждой точки входа а именно: templates, templates2, main_scss и templates (для вашего стиля) и объединить его с помощью 'bundle.js', в результате чего будет иметь несколько уникально именованных комплектов , а именно:

  1. templates.bundle.js
  2. templates2.bundle.js
  3. main_scss.bundle.js

Для подробного объяснения того, как создаются выходные пакеты, ознакомьтесь Документация Webpack для выходных пакетов.

С учетом вышесказанного вы получаете main_scss.bundle.js из моего вышеупомянутого объяснения, и вы получаете main_scss.css файл стилей от вашего MiniCssExtractPlugin плагина.MiniCssExtractPlugin извлекает ваши SASS файлы и конвертирует их в эквивалентный CSS файл.Вы указываете это извлечение от SASS до CSS с этой строкой кода: 

plugins:[
        new MiniCssExtractPlugin({
            filename: "[name].css",
        })
    ]

Обратите внимание, что [name] используется здесь снова, поэтому каждый сгенерированный файл CSS также будет иметь уникальное имя на основена основное имя файла для каждого SASS файла.Если вы просто хотите, чтобы пакет включал ваши JavaScript файлы и генерировал один CSS файл, я бы попробовал следующее:

  1. Создать отдельный пакет, который неимя уникально на основе имени файла каждой точки входа, что-то вроде следующего:

    output: { path: path.resolve(__dirname, 'public/assets'), filename: 'bundle.js' },

  2. Удалите несколько CSS точек входа и вместо этогосоздайте один main.scss файл.Единственная цель этого файла - импортировать все другие файлы SASS вашего проекта.

  3. Добавьте этот файл, созданный на шаге 2, в качестве точки входа.

Это приведет к созданию одного JavaScript пакета: bundle.js и одного CSS файла: main.css, который будет содержать JavaScript и все стили вашего приложения соответственно.Вы можете просто связать ваш сгенерированный JavaScript пакет и соответствующий CSS файл на вашей index.html странице.

Надеюсь, это поможет!

...