Webpack - Ładowanie arkusza stylów bez czcionek

Jestem w stanie zobaczyć mój arkusz stylów na stronie bez problemów. Jednak nie mogę uruchomić swoich webfontów. Próbowałem zapisać wynik mojego css, co nie ma miejsca. Uważam, że właśnie dlatego czcionki nie działają.Webpack - Ładowanie arkusza stylów bez czcionek

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

zbudować

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.

Folder Structure

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>

Źródło

2016-07-22 Jamie Hutber

Gdzie znajduje się plik Font.scss (pokazany w opisie) znajdujący się w strukturze folderów? Czy to jest fontello.scss czy jest tam inny plik? Nie można znaleźć błędu w Twojej konfiguracji, ale jestem pewien, że jest to problem związany z trasą opisaną przez Lindebergue. – Wolfgang

Ok tak łatwo jest dla ludzi, aby zobaczyć, co zrobiłem, aby to działa tutaj jest:

myślę, że było mi łatwiej całkowicie usunąć SCSS i po prostu iść z css moduły po wyjęciu z pudełka. To wydawało się bardzo pomóc.

Użyłem [email protected]: christianalfoni/webpack-express-boilerplate.git, aby pomóc mi przejść przez to. Wiedząc, że mam działający przedmiot, nauczyłem mnie dużo więcej, niż najprawdopodobniej nauczyłem się wcześniej w pakiecie internetowym. Jak można się domyślić, nie było to zbyt wiele: D

Jedną z głównych zmian, która naprawdę pomogła, była zmiana ścieżek nie dziwi. Ale były one w stosunku do ścieżki płci w output.path Przeczytałem to wcześniej, ale myślałem, że było w stosunku do wepack.config.js nie, że stamtąd na wszystko będzie traktowane jako root dokumentu, nawet dla html i css.

** kluczowym elementem :) **

Mam również zaktualizować mój express skonfigurować, bo nie dał mu express.static ścieżkę ... Oh mój głupotę, jak mogłem przegapić taki podstawowy rzecz..Więc:

ekspresowe

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

Finał 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']})) 
     ]; 
    } 
};

chcę powiedzieć s orry dla wszystkich, którzy próbowali. Czuję, że byłem daleko w końcu. Piszę tylko o tym, że ktoś ma podobne problemy. To, co bym z tego wyciągnął, to po prostu użyć tej płyty kotła. Albo statyczna część i partycje wewnątrz html z tego powodu.

Źródło

2016-08-09 23:31:57

Od Sass nie przewiduje przepisywanie URL, używając url() jest nieco tricky. Prostą poprawką jest użycie względnych ścieżek do pliku wejściowego.

@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; 
}

Źródło

2016-07-22 04:27:18 Lindebergue

Dzięki za opinię: D Otrzymuję: 'ERROR in ./~/css-loader?sourceMap!./~/sass-loader?sourceMap!./src/client/scss/main.scss Nie znaleziono modułu : Błąd: nie można rozwiązać "pliku" lub "katalogu" ../font/fontello.eot w C: \ var \ www \ wekindred.com \ src \ client \ scss @ ./~/css-loader?sourceMap !. /~/sass-loader?sourceMap!./src/client/scss/main.scss 6: 887-927 'Czy muszę zmienić coś w moim webpack.config? –

upewnij się, że uzyskałeś właściwą ścieżkę względną: załóżmy, że twoje pliki SCSS są importowane do pliku main.css, potrzebna jest ścieżka od pliku main.css do pliku czcionki. Powinno to wyglądać tak: "../../../public/font/fontello.eot?42978343" .. jeśli poprawnie policzyłem katalogi ;-) – Wolfgang

To dlatego Sass nie posiada opcję "resolve URL" (ale stylus i mniej (opcja domyślna) mają go). Jedyne znane mi rozwiązanie to użycie innego programu ładującego, który rozwiąże wszystkie adresy URL: https://github.com/bholloway/resolve-url-loader. Coś jak:

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

Źródło

2016-07-29 17:06:16

Niestety to mi nie naprawiło: O –

Webpack - Ładowanie arkusza stylów bez czcionek

Odpowiedz

Powiązane problemy