Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.11.2018, 09:00
Профессор
Отправить личное сообщение для s24344 Посмотреть профиль Найти все сообщения от s24344
 
Регистрация: 12.08.2015
Сообщений: 206

Как правильно подключить стили в webpack?
Ребята, подскажите, пожалуйста как правильно Как правильно подключить стили в webpack?
У меня есть следующая структура файлов:
webpack-app/public/assets/fonts/PT_Sans/pt_sans-web-bold-webfont.ttf
webpack-app/public/assets/images/content/2.jpg
webpack-app/src/styles/style.scss/
@font-face {
    font-family: 'pt_sansregular';
    src: url('/assets/fonts/PT_Sans/pt_sans-web-regular-webfont.eot');
    src: url('/assets/fonts/PT_Sans/pt_sans-web-regular-webfont.eot?#iefix') format('embedded-opentype'),
        url('/assets/fonts/PT_Sans/pt_sans-web-regular-webfont.woff') format('woff'),
        url('/assets/fonts/PT_Sans/pt_sans-web-regular-webfont.ttf') format('truetype'),
        url('/assets/fonts/PT_Sans/pt_sans-web-regular-webfont.svg#pt_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: "pt_sansregular";
}

.picture {
    background-image: url('/assets/images/content/2.jpg');
    background-position: center center;
}

webpack-app/src/index.js
console.log('app.js is running!');

import styles from './styles/styles.scss';

ошибок подключения модулей нет, но изображение и шрифты не подключаются.
webpack-app\webpack.config.js
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    context: path.resolve(__dirname, 'src'),

    entry: {
        main: './index.js'
    },

    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'public')
    },

    // mode: 'development',

    watch: true,

    devtool: 'source-map',

    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['env', 'stage-0']
                    }
                }
            },
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    use: ['css-loader', 'sass-loader'],
                    fallback: 'style-loader'
                })
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 8000,
                        name: '[path][name].[ext]', // '[name].[ext]'
                        outputPath: 'img/'
                    }
                }
            }
        ]
    },

    plugins: [
        new ExtractTextPlugin('styles.css')
    ]
};
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как правильно получить и присвоить данные полученные из сервера Axios, react-redux hambat Общие вопросы Javascript 5 07.03.2017 17:09
Как правильно настроить очерёдность выполнения функций? Altai Общие вопросы Javascript 8 01.02.2017 19:32
Сколько можно и как подключить контроллов на 1 страницу в mvc4? vip1987 Angular.js 3 13.11.2016 18:18
Как правильно прицепить обработку события slowklg Events/DOM/Window 6 15.03.2012 16:20
Как правильно очистить maxlength в input? Маэстро Events/DOM/Window 10 22.06.2011 18:14