Webpack 如何在网页包加载程序中保留非英语字符/强制utf-8？

运行Webpack2并尝试将我的SASS编译成.css文件。然而，我的非英语（日语）字体名称被css加载器或sass加载器乱码

我已经有了

@charset“UTF-8”位于my.scss文件的顶部。网页包中是否有一些设置可以强制加载程序使用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'),
    ]
}

原始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加载器有关，而且它们目前正在运行。在此之前，我似乎无法使用webpack管理非英语网站的css。
多亏了robertklep。目前解决此问题的方法是使用“字体系列unescape loader”，可在此处找到：

如果您遇到此问题，请使用
npm install font family unescape loader
将其添加到网页包中，然后将其添加到css loader之后的sass/css loader管道中，如下所示：

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

您可以使用这个库

我的项目使用字体系列日本和我的代码

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

import React，{Component}来自'React'；
从“./common/Header”导入标题；
从“./common/Footer”导入页脚；
从“react Helmet”导入{Helmet}；
类应用程序扩展组件{
render（）{
返回(
{/*头*/}
{`
html，
按钮
输入，
选择，
文本区{
字体系列：“メイリオ", "Hiragino Kaku哥特式专业版“ヒラギノ角ゴ prow3“ＭＳ Ｐゴシック", 无衬线；
}
身体{
保证金：0；
字体系列：“メイリオ“，“Hiragino Kaku哥特式专业版”ヒラギノ角ゴ prow3“ＭＳ Ｐゴシック“，无衬线；}
`}
{/*头*/}
{/*头*/}
{/*头*/}
{this.props.children}
{/*页脚*/}
{/*页脚*/}
);
}
}
导出默认应用程序；
主布局上方的代码
你试过这个吗？成功了！作者在2天前将它添加到npm中，效果很好。