Создание веб-шрифта и его стилей с помощью webpack & sass - PullRequest
Новая
       11

Создание веб-шрифта и его стилей с помощью webpack & sass

0 голосов
/ 12 сентября 2018

Введение

В настоящее время я заменяю процесс сборки grunt на процесс webpack 4 в более старом проекте.

Проект генерирует веб-шрифт на основе нескольких svgs. Стили написаны в scss. Когда генерируется веб-шрифт, помимо шрифта (eot, woff и т. Д.) Также генерируется файл scss, который используется (включается) в одном из файлов scss. Существует также javascript, но это не важно в данном конкретном случае / проблеме.

Я создал конфигурацию, которая успешно генерирует веб-шрифт (и его стиль), а также генерирует CSS-файлы из их sass-источников.

Проблема

Веб-шрифт генерируется с помощью webfonts-loader, который генерирует файл scss и записывает его в папку source scss. Тем не менее, изменения там не отражаются непосредственно в выходном файле CSS. Изменения видны только после второго запуска.

Например: если я добавлю границу в базовый класс css шрифтов, она не будет видна после первого запуска.

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

import webpack from 'webpack';
import ExtractTextPlugin from 'extract-text-webpack-plugin';
import jsImports from './js-imports.js';

const config = {
    mode: 'development',
    devtool: 'source-map',
    entry: [
        // Icon Font
        path.resolve(__dirname, './icon.font.js'),

        // JS
        ...jsImports.map(filePath => path.resolve(__dirname, `../../${filePath}`)),

        // SCSS
        path.resolve(__dirname, '../../assets/stylesheets/scss/admin/admin.scss'),
        path.resolve(__dirname, '../../assets/stylesheets/scss/theme/screen.scss'),
        path.resolve(__dirname, '../../assets/stylesheets/scss/editor/editor.scss'),
    ],
    output: {
        filename: 'app.min.js',
        publicPath: './dist/js',
        path: path.resolve('./dist/js'),
    },
    module: {
        rules: [
            {
                test: /\.font\.js/,
                loader: ExtractTextPlugin.extract({
                    use: [
                        {
                            loader: 'file-loader',
                            options: {
                                name: '../../assets/stylesheets/scss/theme/fonts/custom-icon-font/_icons.scss',
                            }
                        },
                        {
                            loader: 'webfonts-loader',
                            options: {
                                publicPath: '../fonts/',
                            }
                        },
                    ]
                })
            },
            {
                test: /\.scss$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '../css/[name].css',
                        }
                    },
                    {
                        loader: 'extract-loader'
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            debug: true,
                            url: false,
                            sourceMap: true,
                            minimize: true,
                            importLoaders: 2,
                        }
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            sourceMap: true,
                            parser: require('postcss-scss'),
                        }
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sourcemap: true
                        }
                    }
                ]
            },
        ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            Box: 't3js',
            FastClick: 'fastclick',
            masonry: 'masonry',
        }),
        new ExtractTextPlugin('[name].scss'),
    ],
    externals: {
        '$': 'jquery',
        'jQuery': 'jquery',
        'TweenLite': 'TweenLite',
        'TweenMax': 'TweenMax',
        'TimelineMax': 'TimelineMax',
        'masonry': 'masonry',
    },
    stats: {
        modules: false,
        moduleTrace: false,
        children: false // hide plugins logs
    },
    performance: {
        hints: false
    },
};

export default config;

1020 * Зависимость * "@babel/preset-env": "^7.0.0", "babel-cli": "^6.26.0", "babel-preset-es2015": "^6.24.1", "css-loader": "^1.0.0", "extract-loader": "^3.0.0", "extract-text-webpack-plugin": "^4.0.0-beta.0", "file-loader": "^2.0.0", "mini-css-extract-plugin": "^0.4.2", "node-sass": "^4.9.3", "postcss-loader": "^3.0.0", "postcss-scss": "^2.0.0", "sass-loader": "^7.1.0", "style-loader": "^0.23.0", "webfonts-loader": "^4.1.0", "webpack": "^4.17.2", "webpack-cli": "^3.1.0"

...