Nuxt.js:从字体系列中剥离引号的css加载器的问题
我有以下问题:我构建了一个nuxt.js vue应用程序，它使用的是谷歌字体。
我将其加载到head中(通过将url添加到我的nuxt.config.js的head部分) https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700
然后我使用了一个sass变量：$s-font-family-base: 'Playfair Display', serif;，我在整个样式中都使用它来显示这种字体。
现在，当我在运行开发服务器时检查我的浏览器检查器时，一切看起来都很正常：
但是，如果我使用yarn generate (分别为nuxt generate)，这将导致一个带有去掉引号的字体系列属性。同样，如果我将生产推向生活。
当然这是不好的，导致无效的CSS，并可能导致字体加载失败…
现在我假设它链接到nuxts css-loader：https://github.com/webpack-contrib/css-loader
但我不完全确定我是否应该在那里打开一个问题。(我开始创建一个最小的nuxt repo来重现，但是后来我在入门指南：https://cmty.app/nuxt/nuxt.js/issues/c9213中遇到了一个bug )???
无论如何，在此期间，我只是想在这个主题上找到一些建议。干杯，谢谢你的帮助。
回答 1
Stack Overflow用户
发布于 2019-08-12 13:10:31
这解决了我的问题。
cssnano选项https://cssnano.co/optimisations/minifyfontvalues/
在此之前
.box {
font-family: "Helvetica Neue", Arial, Arial, sans-serif;
}之后
.box {
font-family: Helvetica Neue, Arial, sans-serif;
}你的nuxt.config
build: {
postcss: {
plugins: {
cssnano: {
preset: ['default', {minifyFontValues: {removeQuotes: false}}]
}
}
}
},https://stackoverflow.com/questions/56139867
复制相似问题
腾讯云开发者
