0

我正在尝试配置我的 nextJS 应用程序的 webpack 来处理一些 SASS 文件，如下所示：

@font-face
  font-family: 'Marcellus'
  font-style: normal
  font-weight: 400
  src: local('Marcellus-Regular'), url('/fonts/marcellus/Marcellus-Regular.ttf') format('truetype')

这@给了我一个意外的令牌错误。所以我尝试添加一些自定义的 webpack 配置：

module.exports = {
  webpack: function (config) {
    config.module = {
      rules: [
        { test: /(\.sass$)/, loaders: ['sass-loader'] },
        { test: /(\.css$)/, loaders: ['style-loader', 'css-loader', 'postcss-loader'] },
        { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }
      ]
    }
    return config
  }
}

有了这个 *.js 文件不再被识别，我不太确定 SASS 文件是否正确加载。我对 webpack 非常陌生。

4

1 回答 1

1

您需要为 SASS 文件添加多个加载器：

    test: /\.sass$/,
        use: [{
            loader: 'style-loader', // creates style nodes from JS strings
        }, {
            loader: 'css-loader', // translates CSS into CommonJS
        }, {
            loader: 'sass-loader', // compiles Sass to CSS
        }],

来源：Sass-loader

于 2017-10-24T08:57:13.823 回答