CODEWITHSUNDEEP
webpackcss-loadersass-loader
Robert_QSS
Robert_QSS

Reputation: 213

How to preserve non-English characters/force utf-8 in webpack loaders?

Running webpack 2 and trying to compile my SASS into a .css file. However my non-English (Japanese) font names are being garbled by either css-loader or sass-loader.

I already have @charset "UTF-8"; at the top of my .scss file. Is there some setting in webpack where I can force the loaders to use utf-8?

My 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'),
    ]
}

The raw SASS:

@charset "UTF-8";

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

The output CSS:

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

The issue appears to be with css-loader and they're currently working on a solution. Until then looks like I'm unable to use webpack to manage my css for non-English sites.

Upvotes: 2

Views: 3132

Answers (2)

Bui Tuan Dung
Bui Tuan Dung

Reputation: 1

You can use this lib https://github.com/nfl/react-helmet.

my project use font-family japan and my code 

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

Upvotes: 0

Robert_QSS
Robert_QSS

Reputation: 213

Thanks to robertklep. The way to get around this at the moment is using the 'font-family-unescape-loader' found here: https://github.com/swcho/font-family-unescape-loader

If you're having this issue add it to webpack with npm install font-family-unescape-loader, then add it to your sass/css loader pipeline after css-loader like so:

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

Upvotes: 1

Related Questions