Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to retain @ charset or not compile Unicode #998

Closed
laozei6401 opened this issue May 4, 2020 · 1 comment
Closed

How to retain @ charset or not compile Unicode #998

laozei6401 opened this issue May 4, 2020 · 1 comment

Comments

@laozei6401
Copy link

keep charset or not compile Unicode

I want to add Chinese to CSS, but sass loader deleted @ charset and compiled Unicode into Chinese. I've been looking for it for many days and I don't know how to solve it. I want to ask how to solve this problem here

When I remove sass loader, it's what I wan

The webpack config
const path = require("path");
const fs = require("fs");

const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const isEnvDevelopment = process.env.NODE_ENV === "development";
const isEnvProduction = process.env.NODE_ENV === "production";

function resolve(dir) {
  return path.resolve(__dirname, dir);
}

/**
 * @type import('webpack').Configuration
 */
module.exports = {
  mode: isEnvDevelopment ? "development" : "production",
  devtool: isEnvDevelopment ? "cheap-module-eval-source-map" : false,
  entry: {
    app: resolve("./src"),
  },
  output: {
    path: path.resolve("dist"),
    publicPath: "/",
    hashDigestLength: 10,
    filename: "js/[name].[contenthash].js",
    chunkFilename: "js/[name].[contenthash].js",
  },
  optimization: {
    runtimeChunk: "single",
  },
  module: {
    rules: [
      {
        test: /\.s?css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
      },
    ],
  },
  plugins: [
    isEnvProduction && new CleanWebpackPlugin(),
    isEnvProduction &&
      new MiniCssExtractPlugin({
        filename: "css/[name].[hash].css",
        chunkFilename: "css/[name].[contenthash].css",
      }),
  ].filter(Boolean),
};

scss code

@charset "UTF-8";

/*
 * 测试一波
 */

body ::before {
  content: "\6d4b\8bd5\4e00\6ce2";
  display: flex;
}

If anybody has any suggestions at all, I would greatly appreciate it. I know there's been other issues posted with similar errors, but I feel that I've tried all the provided "solutions" and literally nothing has worked for me thus far. I'm absolutely willing to provide more code if need be, or to answer other questions about my setup. Really at my wits' end!

@jathak
Copy link
Member

jathak commented May 5, 2020

Dart Sass currently always outputs UTF-8, so your escaped unicode is converted here. See #568, which tracks support for an --ascii-only flag.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants