styzhang/css-unicode-loader

webpack loader for convert chinese or double-byte character string of scss/sass/less/css files to unicode encoding.

css-unicode-loader's Issues

有没有大佬教一下 vue-cli 4.x 怎么写配置

如果是parcel2打包如何进行配置？

如题

vue-cli4 搭建的项目按照文档提示设置无效

const path = require('path')
const CompressionWebpackPlugin = require('compression-webpack-plugin')

const resolve = dir => path.resolve(__dirname, dir)
const productConfig = require('./src/version/config')
const isProd = process.env.NODE_ENV === 'production'

module.exports = {
publicPath: '/', // vue-cli3.3+,部署应用包时的基本 URL,用法和 webpack 本身的 output.publicPath 一致
assetsDir: 'static', // 静态资源地址
productionSourceMap: false,
transpileDependencies: ['view-design', 'crypto-js'], // 解决在 ie 上无法访问的问题
// scss 全局引入
css: {
extract: isProd, // 开发环境下关闭，true 和热更新不兼容，保证 css 热更新
sourceMap: !isProd,
loaderOptions: {
sass: {
// implementation: require('sass'),
additionalData: @import "@/styles/common/_variables.scss"; @import "@/styles/common/_mixins.scss";,
},
},
},
chainWebpack: config => {
// 修复HMR
config.resolve.symlinks(true)

	// 根据 js 版本配置文件修改 index.html 文件中的产品名称
	config.plugin('html').tap(options => {
		options[0].title = productConfig.productName.join('')

		return options
	})

	return config
},
// 配置 webpack
configureWebpack: config => {
	// 路径别名
	config.resolve.alias = {
		...config.resolve.alias,
		'@assets': resolve('src/assets'),
		'@styles': resolve('src/styles'),
		'@services': resolve('src/services'),
		'@router': resolve('src/router'),
		'@store': resolve('src/store'),
		'@components': resolve('src/components'),
		'@views': resolve('src/views'),
		'@scripts': resolve('src/scripts'),
		'@constants': resolve('src/constants'),
		'@mixins': resolve('src/scripts/mixins'),
		'@utils': resolve('src/scripts/utils'),
	}
	const sassLoader = require.resolve('sass-loader')

	config.module.rules
		.filter(rule => {
			return rule.test.toString().indexOf('scss') !== -1
		})
		.forEach(rule => {
			rule.oneOf.forEach(oneOfRule => {
				const sassLoaderIndex = oneOfRule.use.findIndex(
					item => item.loader === sassLoader
				)
				oneOfRule.use.splice(sassLoaderIndex, 0, {
					loader: require.resolve('css-unicode-loader'),
				})
			})
		})
	// 添加对 pdf 文件的处理 loader
	console.log(config.module.rules)
	config.module.rules = [
		...config.module.rules,
		{
			test: /\.pdf$/,
			use: 'url-loader',
		},
		{
			test: /\.scss$/,
			use: [
				{
					loader: 'css-unicode-loader', // Convert double-byte character to unicode encoding.
				},
				{
					loader: 'sass-loader', // Compiles Sass to CSS
				},
			],
		},
	]

	// gzip 压缩
	if (isProd) {
		config.plugins = [
			...config.plugins,
			new CompressionWebpackPlugin({
				filename: '[path][base].gz',
				algorithm: 'gzip',
				test: /\.(js|css|html|svg)(\?.*)?$/i,
				threshold: 10240,
				minRatio: 0.8,
			}),
		]
	} else {
		// 生成可调试的代码
		config.output.devtoolModuleFilenameTemplate = info => {
			const resPath = info.resourcePath

			if (
				(/\.vue$/.test(resPath) &&
					!/type=script/.test(info.identifier)) ||
				/node_modules/.test(resPath)
			) {
				return `webpack:///${resPath}?${info.hash}`
			}
			return `webpack:///${resPath.replace(
				'./src',
				'uncompiled-code/src'
			)}`
		}
	}
},

}
Ï

rule 可能不存在test字段

我在使用的时候， vue-cli项目， 发现config.module.rules里面有一项内容不存在test字段， 所以可以先判断有没有test字段 （为了加粗显示， 就没有使用代码块了， 直接用的文本）

// vue.config.js
module.exports = {
configureWebpack: config => {
const sassLoader = require.resolve('sass-loader');
config.module.rules.filter(rule => {
return **rule.test** && rule.test.toString().indexOf("scss") !== -1;
})
.forEach(rule => {
rule.oneOf.forEach(oneOfRule => {
const sassLoaderIndex = oneOfRule.use.findIndex(item => item.loader === sassLoader);
oneOfRule.use.splice(sassLoaderIndex, 0,
{ loader: require.resolve("css-unicode-loader") });
});
});
}
}

不是vue-cli怎么配置？？？

vue-cli@5怎么配置

vue-cli@5怎么配置，一直都是无效的

你好，想问一下乱码问题的原因是sass-loader的问题吗？感谢！

环境：node16 + @vue/cli4 + elementUI2.15.7 + sass 1.43.4 + sass-loader 10.1.1
该环境中打包之后会出现 el-icon css乱码：

但是同样的版本使用vitejs构建的项目就正常，当然vitejs不需要手动引入：sass-loader。

使用了大佬的这个loader确实解决了，想了解一下深层原因，请教一下