Question

我无法让@ font-face使用webpack。我正在使用vuejs框架。这是我得到的错误。我尝试使用url-loader和file-loader，但无法解决。我也是webpack和vue的新手，所以我不知道自己在做什么错。

在下一个img上，您可以看到我的文件夹结构和webpack配置。

@font-face {
    font-family: 'Lato-Light';
    src: url('../../fonts/Lato-Light/Lato-Light.eot');
    src: url('../../fonts/Lato-Light/Lato-Light.eot?#iefix') format('embedded- 
opentype'),
    url('../../fonts/Lato-Light/Lato-Light.woff2') format('woff2'),
    url('../../fonts/Lato-Light/Lato-Light.woff') format('woff'),
    url('../../fonts/Lato-Light/Lato-Light.ttf') format('truetype'),
    url('../../fonts/Lato-Light/Lato-Light.svg#Lato-Light') format('svg');
    font-weight: normal;
    font-style: normal;
}

所有@ font-face都放置在typography文件夹中的index.scss中，所有内容都导入到common文件夹中的index.scss中。

Answer 1

将文件加载器选项移至rules集合而不是loaders，它已被弃用，似乎已被rules集合覆盖。

Answer 2

我发现了问题。因此，首先，我像这样设置配置并放入规则集合：

const mapStateToProps = (state) => ({
    apiKey: state.apiKey,
    router: state.router
});

class Main extends Component {
    render() {
        let redirectToLogin;
        console.log(this.props.router.location.pathname)
        if (this.props.apiKey.role === "other" && this.props.router.location.pathname !== "/login") {
            redirectToLogin = <Redirect to="/login"/>
        } else {
            redirectToLogin = ""
        }

        return (
            <main>
                {redirectToLogin}
                <Switch>
                    <Route exact path='/login' component={LoginPage}/>
                    <Route exact path='/' component={HomePage}/>
                    <Route exact path='/somepage' component={SomePage}/>
                </Switch>
            </main>
        )
    }
}

export default withRouter(connect(mapStateToProps)(Main))

此后，我遇到错误，提示我的路径不起作用。这是因为我的字体URL路径与我的根scss文件无关。它们与使用的scss文件有关。 Sass / libsass不提供url重写，因此所有链接的资产必须相对于输出。我使用resolve-url-loader解决了这个问题。

sass-loader problems-with-url

resolve-url-loader

  {
    test: /\.(woff|woff2|eot|ttf|svg)$/,
    loader: 'url-loader?limit=100000'
  }

如果您使用的是vue-loader，则还需要以下内容：

{
    test: /\.css$/,
    use: [
      'vue-style-loader',
      'css-loader',
      'resolve-url-loader'
    ],
  },
  {
    test: /\.scss$/,
    use: [
      'vue-style-loader',
      'css-loader',
      'resolve-url-loader',
      'sass-loader?sourceMap'
    ],
  }

如何使用webpack运行@ font-face？

2 个答案: