Question

我正在尝试为我的nuxt项目设置一个全局css，我在执行时在nuxt.config.js中添加了css文件路径：

npm run dev

我遇到了这个错误：

 ERROR  in ./assets/main.css                                                                                                                                                                                                                                                                                                            friendly-errors 10:22:02

Module build failed (from ./node_modules/postcss-loader/src/index.js):                                                                                                                                                                                                                                                                  friendly-errors 10:22:02
Error: Can't resolve 'style.css' in 'C:\Users\foo\Desktop\bar\nuxt_test\assets'
    at onError (C:\Users\foo\Desktop\bar\nuxt_test\node_modules\enhanced-resolve\lib\Resolver.js:61:15)
    at loggingCallbackWrapper (C:\Users\foo\Desktop\bar\nuxt_test\node_modules\enhanced-resolve\lib\createInnerCallback.js:31:19)
    at runAfter (C:\Users\foo\Desktop\bar\nuxt_test\node_modules\enhanced-resolve\lib\Resolver.js:158:4)
    at innerCallback (C:\Users\foo\Desktop\bar\nuxt_test\node_modules\enhanced-resolve\lib\Resolver.js:146:3)
    at loggingCallbackWrapper (C:\Users\foo\Desktop\bar\nuxt_test\node_modules\enhanced-resolve\lib\createInnerCallback.js:31:19)
    at next (C:\Users\foo\Desktop\bar\nuxt_test\node_modules\enhanced-resolve\node_modules\tapable\lib\Tapable.js:252:11)
    at innerCallback (C:\Users\foo\Desktop\bar\nuxt_test\node_modules\enhanced-resolve\lib\Resolver.js:144:11)
    at loggingCallbackWrapper (C:\Users\foo\Desktop\bar\nuxt_test\node_modules\enhanced-resolve\lib\createInnerCallback.js:31:19)
    at next (C:\Users\foo\Desktop\bar\nuxt_test\node_modules\enhanced-resolve\node_modules\tapable\lib\Tapable.js:249:35)
    at resolver.doResolve.createInnerCallback (C:\Users\foo\Desktop\bar\nuxt_test\node_modules\enhanced-resolve\lib\DescriptionFilePlugin.js:44:6)
    at loggingCallbackWrapper (C:\Users\foo\Desktop\bar\nuxt_test\node_modules\enhanced-resolve\lib\createInnerCallback.js:31:19)
    at afterInnerCallback (C:\Users\foo\Desktop\bar\nuxt_test\node_modules\enhanced-resolve\lib\Resolver.js:166:11)
    at loggingCallbackWrapper (C:\Users\foo\Desktop\bar\nuxt_test\node_modules\enhanced-resolve\lib\createInnerCallback.js:31:19)
    at next (C:\Users\foo\Desktop\bar\nuxt_test\node_modules\enhanced-resolve\node_modules\tapable\lib\Tapable.js:249:35)
    at C:\Users\foo\Desktop\bar\nuxt_test\node_modules\enhanced-resolve\lib\ModuleKindPlugin.js:23:4
    at loggingCallbackWrapper (C:\Users\foo\Desktop\bar\nuxt_test\node_modules\enhanced-resolve\lib\createInnerCallback.js:31:19)

这只是重现该问题的示例代码-我使用以下方法生成新的nuxt应用后，通过添加这些文件来重现该问题：

npx create-nuxt-app nuxt_test

main.css：

@import url("style.css");

style.css：

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(../assets/roboto.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}

nuxt.config.js：

import pkg from './package'

export default {
  mode: 'spa',
  css: ['~assets/main.css'],

  /*
   ** Build configuration
   */
  build: {
    /*
     ** You can extend webpack config here
     */
    extend(config, ctx) {
      // Run ESLint on save
      if (ctx.isDev && ctx.isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }
  }
}

Nuxt无法解析CSS导入

0 个答案: