html - 在使用styl 时遇到的问题

问题描述

问 题

在js中使用 require('/.styl')
有疑问的点在于 在html中进行访问时 为什么不是生成css文件 而还是styl文件
在styl中引入了字体文件 但在html中未显示出字体文件
在webpack.config.js中进行了如下配置 如何查看字体文件是否有引入没？

module: {
        rules: [{
                test: /\.styl$/,
                //loaders: ['style-loader', 'css-loader', 'stylus-loader']
                loaders: ['style-loader', 'css-loader?sourceMap', 'stylus-loader?sourceMap']
            }, {
                test: /\.(png|jpg|gif|jpeg)$/, //处理css文件中的背景图片
                loader: 'url-loader?limit=1&name=./static/assets/[name].[hash:4].[ext]'
                    //当图片大小小于这个限制的时候，会自动启用base64编码图片。减少http请求,提高性能
            }, {
                test: /\.html$/, //获取html里面的图片
                loader: 'html-loader'
            }, {
                test: /\.(png|jpg|jpeg|gif)$/,
                use: 'url-loader?limit=25000&name=images/[name].[ext]'
            },
            // 处理字体文件
            {
                test: /\.(eot|woff|ttf|woff2|svg)$/,
                use:'file-loader'
                //use: 'url-loader?limit=100000&name=fonts/[name].[ext]'
            }
        ]
    }

解决方案

从配置上看没有什么问题，你检查下stylus文本中的字体引入的路径是否正确（注意字体文件在fonts文件夹下），另外你打开Chrome的Network页，看下字体文件有没有请求记录，这样可以确定字体文件是否被加载。

这篇关于html - 在使用styl 时遇到的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！