Webpack 4无法正确使用字体

时间:2018-10-22 02:52:18

标签: webpack webpack-4

  

1种错误传输的字体。

     

2错误地规定了CSS中字体的路径

// Config

            {
                test: /\.(ttf|eot|woff(2)?)(\?v=\d+\.\d+\.\d+)?$/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        name: '[path][name].[ext]',
                        outputPath: 'fonts/'
                    }
                }]
        },

// Sass

    @font-face
        font-family: 'Open Sans'
        font-style: normal
        font-weight: 300
        src: url('../fonts/opensans/OpenSansLight/OpenSansLight.woff') format('woff')

//构建

dist/fonts/src/fonts/opensans/OpenSansLight/OpenSansLight.woff  

//编译的CSS

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: url(/fonts/src/fonts/opensans/OpenSansLight/OpenSansLight.woff) format("woff"); }

https://dropmefiles.com/BZ2sr

0 个答案:

没有答案