Webpack - загрузка таблицы стилей, но не шрифты

Я могу видеть мою таблицу стилей на странице без проблем. Однако я не могу заставить мои веб-сайты работать. Я попытался сохранить вывод моего css, которого нет. Я считаю, что именно поэтому шрифты не работают.Webpack - загрузка таблицы стилей, но не шрифты

Webpack

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

module.exports = { 

    resolve: { 
     extensions: ['', '.js'] 
    }, 

    entry: ['webpack-hot-middleware/client','./src/client/js/Kindred.js'], 

    output: { 
     path: './public', 
     filename: 'bundle.js', 
     publicPath: '/public/js' 
    }, 

    devtool: 'cheap-module-source-map', 
    module: { 
     loaders: [ 
      { 
       test: /\.js$/, 
       exclude: /node_modules/, 
       loader: 'babel-loader', 
       query: {presets: ['es2015', 'react', 'react-hmre', 'stage-0']} 
      }, 
      {test: /\.scss$/, loaders: [ 
       'style?sourceMap&modules', 
       'css?sourceMap&modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]', 
       'resolve-url', 
       'sass?sourceMap&modules']}, 
      { test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader?modules!css-loader?sourceMap&modules")}, 
      {test: /\.png$/, loader: "url-loader?limit=100000"}, 
      {test: /\.jpg$/, loader: "file-loader"}, 
      { 
       test: /\.(eot|svg|ttf|woff|woff2)$/, 
       loader: 'file?name=public/font/[name].[ext]' 
      } 
     ] 
    }, 

    sassLoader: { 
     includePaths: [ 'src/client/scss' ] 
    }, 

    plugins: process.env.NODE_ENV === 'production' ? [ 
     new ExtractTextPlugin ('app.css', {allChunks: true}), 
     new webpack.optimize.DedupePlugin(), 
     new webpack.optimize.OccurrenceOrderPlugin(), 
     new webpack.optimize.UglifyJsPlugin() 
    ] : [ 
     new webpack.HotModuleReplacementPlugin(), 
     new webpack.NoErrorsPlugin(), 
     new ExtractTextPlugin("[name].css") 
    ] 

};

Font.scss

@font-face { 
    font-family: 'fontello'; 
    src: url('/public/font/fontello.eot?42978343'); 
    src: url('/public/font/fontello.eot?42978343#iefix') format('embedded-opentype'), 
     url('/public/font/fontello.woff2?42978343') format('woff2'), 
     url('/public/font/fontello.woff?42978343') format('woff'), 
     url('/public/font/fontello.ttf?42978343') format('truetype'), 
     url('/public/font/fontello.svg?42978343#fontello') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
}

пристроить

Hash: 6dbe5412ed2de3ad1f84 
Version: webpack 1.13.1 
Time: 5989ms 
            Asset  Size Chunks    Chunk Names 
           bundle.js 2.2 MB  0 [emitted] main 
    0.4dfc2adf9da9e1d82440.hot-update.js 402 kB  0 [emitted] main 
    4dfc2adf9da9e1d82440.hot-update.json 36 bytes   [emitted] 
          bundle.js.map 2.51 MB  0 [emitted] main 
0.4dfc2adf9da9e1d82440.hot-update.js.map 419 kB  0 [emitted] main 
chunk {0} bundle.js, 0.4dfc2adf9da9e1d82440.hot-update.js, bundle.js.map, 0.4dfc2adf9da9e1d82440.hot-update.js.map (main) 2.08 MB [rendered] 
    [565] ./~/css-loader?sourceMap&modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]!./~/resolve-url-loader!./~/sass-loader?sourceMap&modules!./src/client/scss/main.scss 401 kB {0} [built] 
    + 565 hidden modules 
webpack: bundle is now VALID.

Структура папок

HTML

<!doctype html public="storage"> 
<html> 
<link rel='stylesheet' href='/public/styles.css' type='text/css' /> 
<title>MyKindred.com</title> 
<div id=app></div> 
<script src="/public/js/bundle.js"></script>

источник

2016-07-22 Jamie Hutber

Где находится ваш файл Font.scss (показано в вашем описании) в структуре папок? Это fontello.scss или есть другой файл? Пока не удалось найти ошибку в вашем конфиге, но я уверен, что это проблема, связанная с путями, подобная описанной Lindebergue. – Wolfgang

Ok просто так легко для людей, чтобы увидеть, что я сделал, чтобы получить его работу здесь это:

Я думаю, что это было легче для меня, чтобы полностью удалить SCSS и просто пойти с CSS модули из коробки. Это, казалось, очень помогло.

Я использовал [email protected]: christianalfoni/webpack-express-boilerplate.git, чтобы помочь мне вести себя. Знать, что у меня была рабочая вещь, на самом деле научила меня черту гораздо больше, чем я, скорее всего, научился раньше в веб-пакете. Как вы можете догадаться, это было не так много: D

Также одним из основных изменений, которые действительно помогли, было изменение пути не удивительно. Но это были относительно пола пути в output.path. Я читал это раньше, но думал, что это относительно wepack.config.js, а не от того, что оттуда все будет считаться корнем документа, даже для html и css.

** KEY PART :) **

Я также должен обновить мой экспресс установить, так как я не дал ему express.static пути ... О мой глупость, как я мог пропустить такой основные вещь..Итак:

Экспресс

app.use(express.static(__dirname + '/public/')); //Don't forget me :(

Final CSS

/* Webfont: Lato-Black */@font-face { 
    font-family: 'LatoBlack'; 
    src: url('/font/Lato-Black.eot'); /* IE9 Compat Modes */ 
    src: url('/font/Lato-Black.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
     url('/font/Lato-Black.woff2') format('woff2'), /* Modern Browsers */ 
     url('/font/Lato-Black.woff') format('woff'), /* Modern Browsers */ 
     url('/font/Lato-Black.ttf') format('truetype'); 
    font-style: normal; 
    font-weight: normal; 
    text-rendering: optimizeLegibility; 
}

Wekpack.config

'use strict'; 
var path = require('path'); 
var webpack = require('webpack'); 
var HtmlWebpackPlugin = require('html-webpack-plugin'); 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 
var qs = require('querystring'); 
var precss = require('precss'); 
var autoprefixer = require('autoprefixer'); 
var stripInlineComments = require('postcss-strip-inline-comments'); 

module.exports = { 
    devtool: 'eval-source-map', 
    // resolve: { modulesDirectories: ['node_modules'], extension: ['', '.js', '.css'] }, 
    entry: [ 
     'webpack-hot-middleware/client?reload=true', 
     path.join(__dirname, 'src/client/js/Kindred') 
     // path.join(__dirname, 'app/main') 
    ], 
    output: { 
     path: path.join(__dirname, '/public/'), 
     filename: '[name].js', 
     publicPath: '/' 
    }, 
    plugins: [ 
     new HtmlWebpackPlugin({ 
      template: 'public/index.tpl.html', 
      inject: 'body', 
      filename: 'index.html' 
     }), 
     new webpack.optimize.OccurenceOrderPlugin(), 
     new webpack.HotModuleReplacementPlugin(), 
     new webpack.NoErrorsPlugin(), 
     new webpack.DefinePlugin({ 
      'process.env.NODE_ENV': JSON.stringify('development') 
     }) 
    ], 
    module: { 
     loaders: [ 
      { 
       test: /\.jsx?$/, 
       exclude: /node_modules/, 
       loader: 'babel', 
       query: {"presets": ["react", "es2015", "stage-0", "react-hmre"]} 
      }, { 
       test: /\.json?$/, 
       loader: 'json' 
      }, 
      { 
       test: /\.jpg$/, loader: "file-loader" 
      }, 
      { 
       test: /\.css$/, 
       loaders: [ 
        'style-loader', 
        'css-loader?importLoaders&' + qs.stringify({ 
         modules: true, 
         importLoaders: 1, 
         localIdentName: '[path][name]-[local]' 
        }), 
        'postcss-loader?parser=postcss-scss' 
       ] 
      }, 
      // Font Definitions 
      { test: /\.svg$/, loader: 'url?limit=65000&mimetype=image/svg+xml&name=font/[name].[ext]' }, 
      { test: /\.woff$/, loader: 'url?limit=65000&mimetype=application/font-woff&name=font/[name].[ext]' }, 
      { test: /\.woff2$/, loader: 'url?limit=65000&mimetype=application/font-woff2&name=font/[name].[ext]' }, 
      { test: /\.[ot]tf$/, loader: 'url?limit=65000&mimetype=application/octet-stream&name=font/[name].[ext]' }, 
      { test: /\.eot$/, loader: 'url?limit=65000&mimetype=application/vnd.ms-fontobject&name=font/[name].[ext]' } 
     ] 
    }, 
    postcss: function (webpack) { 
     return [ 
      stripInlineComments 
      , precss 
      , autoprefixer 
      , require('postcss-simple-vars') 
      , require('postcss-nested' 
      , autoprefixer({browsers: ['last 2 versions']})) 
     ]; 
    } 
};

Я хочу сказать, что S orry для всех, кто пытался. Я чувствую, что в конце концов я был далеко. Я только публикую этот факт, у кого-то возникают подобные проблемы. То, что я возьму от этого, - это просто использовать эту плиту котла. Из-за этого статическая часть и parths внутри html.

источник

2016-08-09 23:31:57

Поскольку Sass не обеспечивает перезаписи URL, используя url() немного tricky. Простое исправление заключается в использовании относительных путей к файлу ввода.

@font-face { 
    font-family: 'fontello'; 
    src: url('../font/fontello.eot?42978343'); 
    src: url('../font/fontello.eot?42978343#iefix') format('embedded-opentype'), 
     url('../font/fontello.woff2?42978343') format('woff2'), 
     url('../font/fontello.woff?42978343') format('woff'), 
     url('../font/fontello.ttf?42978343') format('truetype'), 
     url('../font/fontello.svg?42978343#fontello') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
}

источник

2016-07-22 04:27:18 Lindebergue

Спасибо за отзыв: D Однако я получаю: 'ERROR в ./~/css-loader?sourceMap!///sass-loader?sourceMap!./src/client/scss/main.scss Модуль не найден : Ошибка: не удается разрешить «файл» или «каталог» ./font/fontello.eot в C: \ var \ www \ wekindred.com \ src \ client \ scss @ ./~/css-loader?sourceMap !. /~/sass-loader?sourceMap!./src/client/scss/main.scss 6: 887-927 'Нужно ли что-то менять в моем webpack.config? –

не забудьте получить правильный относительный путь: предположим, что ваши файлы SCSS шрифта импортированы в main.css, вам понадобится путь из main.css в файл шрифта. Поэтому он должен выглядеть так: «../../../public/font/fontello.eot?42978343» .. если я правильно правильно подсчитал каталоги ;-) – Wolfgang

Это потому, что Sass не имеет опцию «Решимость URL» (но stylus и меньше (опция по умолчанию) есть его). Единственное решение, которое я знаю, это использовать другой загрузчик, который разрешит все URL-адреса https://github.com/bholloway/resolve-url-loader. Что-то вроде:

{ 
    test : /\.scss$/, 
    loaders: "!css!resolve-url!sass?sourceMap" 
}

источник

2016-07-29 17:06:16

К сожалению, это не исправило это для меня: O –

Webpack - загрузка таблицы стилей, но не шрифты

ответ

Смежные вопросы