Question

我正在使用webpack进行vue SPA项目。我也有用于scss的加载器。从另一个通过npm安装的scss导入scss时遇到问题，到目前为止，我尝试了@fontawesome和flag-icon，两者都给我相同的错误。

我遇到的第一个错误是错误消息，提示无法解析字体：

ERROR in ./project/static/scss/dashboard/dashboard.scss (./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js?sourceMap!./project/static/scss/dashboard/dashboard.scss)
Module not found: Error: Can't resolve '../webfonts/fa-solid-900.eot' in '/var/www/python/django/django/project/static/scss/dashboard'
 @ ./project/static/scss/dashboard/dashboard.scss (./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js?sourceMap!./project/static/scss/dashboard/dashboard.scss) 7:351078-351117 7:351148-351187

我试图寻找解决方法，发现我不得不尝试使用resolve-url-loader，但这给了我另一个错误：

｢wdm｣: Error: illegal operation on a directory
at MemoryFileSystem.writeFileSync (/var/www/python/project/project/node_modules/memory-fs/lib/MemoryFileSystem.js:211:9)
at MemoryFileSystem.writeFile (/var/www/python/project/project/node_modules/memory-fs/lib/MemoryFileSystem.js:324:8)
at writeOut (/var/www/python/project/project/node_modules/webpack/lib/Compiler.js:339:29)
at asyncLib.forEach (/var/www/python/project/project/node_modules/webpack/lib/Compiler.js:349:7)
at baseEach (/var/www/python/project/project/node_modules/neo-async/async.js:2416:9)
at Object.each (/var/www/python/project/project/node_modules/neo-async/async.js:2843:9)
at emitFiles (/var/www/python/project/project/node_modules/webpack/lib/Compiler.js:312:13)
at Immediate.<anonymous> (/var/www/python/project/project/node_modules/memory-fs/lib/MemoryFileSystem.js:288:4)
at runCallback (timers.js:810:20)
at tryOnImmediate (timers.js:768:5)

在这一点上，我不知道还有什么解决方案。我相信在尝试加载webfonts目录时会发生这种情况。

有人知道解决方法吗？谢谢，

这是我在webpack.config.dev.js中使用的模块：

module: {
rules: [
  {
    test: /\.css$/,
    use: ExtractTextPlugin.extract({
      use: "css-loader"
    }),
  },
  {
    test: /\.scss$/,
    use: ExtractTextPlugin.extract({
      use: [
        'css-loader',
        'resolve-url-loader',
        'sass-loader?sourceMap'
      ]
    })
  },
  {
    test: /\.sass$/,
    use: ExtractTextPlugin.extract({
      use: [
        'css-loader',
        'resolve-url-loader',
        'sass-loader?sourceMap'
      ]
    })
  },
  {
    test: /\.vue$/,
    loader: 'vue-loader',
    options: {
      loaders: {
        // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
        // the "scss" and "sass" values for the lang attribute to the right configs here.
        // other preprocessors should work out of the box, no loader config like this necessary.
        'scss': [
          'vue-style-loader',
          'css-loader',
          'resolve-url-loader',
          'sass-loader?sourceMap'
        ],
        'sass': [
          'vue-style-loader',
          'css-loader',
          'resolve-url-loader',
          'sass-loader?sourceMap'
        ]
      }
      // other vue-loader options go here
    }
  },
  {
    test: /\.js$/,
    loader: 'babel-loader',
    exclude: /node_modules/
  },
  {
    test: /\.(png|jpg|gif|svg)$/,
    loader: 'file-loader',
    options: {
      name: '?[name].[ext]?[hash]',
      publicPath: '/assets/'
    }
  },
  { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
  { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }
]

}，

从npm导入字体的Webpack错误

0 个答案: