Как сохранить неанглийские символы/форсировать utf-8 в загрузчиках веб-пакетов?

Запускаю webpack 2 и пытаюсь скомпилировать SASS в файл .css. Однако мои неанглийские (японские) имена шрифтов искажаются либо css-loader, либо sass-loader.

У меня уже есть @charset "UTF-8"; в начале моего файла .scss. Есть ли какая-то настройка в веб-пакете, где я могу заставить загрузчики использовать utf-8?

Мой webpack.config.js:

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

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
    },
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({use: ['css-loader', 'sass-loader'], fallback: 'style-loader'}),
            },
        ],
    },
    plugins: [
        new ExtractTextPlugin('css/style.css'),
    ]
}

Сырой SASS:

@charset "UTF-8";

$noto: "Noto Sans Japanese", "メイリオ", Meiryo, "游ゴシック", YuGothic, sans-serif;

Выходной CSS:

"Noto Sans Japanese", "\30E1\30A4\30EA\30AA", Meiryo, "\6E38\30B4\30B7\30C3\30AF", YuGothic, sans-serif;

Похоже, проблема связана с css-loader, и в настоящее время они работают над решением. . До тех пор похоже, что я не могу использовать веб-пакет для управления моим css для неанглоязычных сайтов.


webpack css-loader sass-loader
person Robert_QSS    schedule 12.06.2017    source источник
comment
Вы пробовали это? github.com/swcho/font-family-unescape-loader   -  person robertklep    schedule 23.06.2017
comment
Это сделано! Автор добавил его в npm 2 дня назад, и он отлично работает.   -  person Robert_QSS    schedule 26.06.2017

Ответы (2)


arrow_upward
1
arrow_downward

Благодаря робертклепу. На данный момент это можно обойти с помощью 'font-family-unescape-loader', который можно найти здесь: https://github.com/swcho/font-family-unescape-loader

Если у вас возникла эта проблема, добавьте ее в webpack с помощью npm install font-family-unescape-loader, а затем добавьте ее в конвейер загрузчика sass/css после css-loader следующим образом:

use: ExtractTextPlugin.extract({use: ['font-family-unescape-loader', 'css-loader', 'sass-loader'], fallback: 'style-loader'}),
person Robert_QSS    schedule 26.06.2017

arrow_upward
0
arrow_downward

Вы можете использовать эту библиотеку https://github.com/nfl/react-helmet.

мой проект использует японское семейство шрифтов и мой код

import React, { Component } from 'react';
import Header from './common/header';
import Footer from './common/footer';
import {Helmet} from "react-helmet";

class App extends Component {
  render() {
    return (
      <div className="my-app">
        {/*  Head */}
        <Helmet>
          <style type="text/css">{`
            html,
            button,
            input,
            select,
            textarea {
                font-family: "メイリオ", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", sans-serif;
            }
            body {
                margin: 0;
             font-family: "メイリオ", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", sans-serif;}
           `}</style>
        </Helmet>
        {/*  Head */}
        {/* HEADER */}
        <Header />
        {/* HEADER */}
        <div id="content">
          {this.props.children}
        </div>
        {/*Footer*/}
        <Footer />
        {/*Footer*/}
      </div>
    );
  }
}

export default App;

Code Above master layout
person Bui Tuan Dung    schedule 19.09.2018