Question

运行webpack 2并尝试将我的SASS编译为.css文件。但是我的非英语（日语）字体名称被css-loader或sass-loader乱码。

我的.scss文件顶部已经有@charset "UTF-8";了。 webpack中是否有一些设置可以强制加载器使用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，它们目前是working on a solution。在那之前看起来我无法使用webpack管理我的非英语网站的CSS。

Answer 1

感谢robertklep。目前解决这个问题的方法是使用此处的'font-family-unescape-loader'：https://github.com/swcho/font-family-unescape-loader

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

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

Answer 2

您可以使用此库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

如何在webpack加载器中保留非英文字符/强制utf-8？

2 个答案: