I am using Nuxt.js , and used its boil

I try to initialize a nuxt project with the command below: <div class="highlight h

Try to use global css in Nuxt.js <a href="https://github.com/nuxt/nuxt.js/blob/mas

I've set this config in nuxt.config.js , <div clas

here is the full nuxt.config.js file, <div class=

now it works 👍 thanks a lot <a class="user-mention notranslate" data-hovercard-ty

SyntaxError: Invalid or unexpected token => @charset "UTF-8"; about at-ui HOT 7 CLOSED

at-ui commented on May 30, 2024

SyntaxError: Invalid or unexpected token => @charset "UTF-8";

from at-ui.

Comments (7)

koppthe commented on May 30, 2024 2

I try to initialize a nuxt project with the command below:

vue init nuxt-community/starter-template nuxt-demo

and then install at-ui and at-ui-style

yarn add at-ui
yarn add at-ui-style

set the css config in nuxt.config.js

module.exports = {
  /*
  ** Headers of the page
  */
  head: {
    title: 'nuxt-demo',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'Nuxt.js project' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  /*
  ** Customize the progress bar color
  */
  loading: { color: '#3B8070' },
  /*
  ** Build configuration
  */
  css: [
    'at-ui-style'
  ],
  build: {
    extractCSS: true,
    /*
    ** Run ESLint on save
    */
    extend (config, ctx) {
      if (ctx.dev && ctx.isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }
  }
}

use the components of at-ui in pages/index.vue

<template>
  <section class="container">
    <div>
      <logo/>
      <h1 class="title">
        nuxt-demo
      </h1>
      <h2 class="subtitle">
        Nuxt.js project
      </h2>
      <div class="links">
        <a href="https://nuxtjs.org/" target="_blank" class="button--green">Documentation</a>
        <a href="https://github.com/nuxt/nuxt.js" target="_blank" class="button--grey">GitHub</a>
      </div>
      <at-button @click="showMessage">Test</at-button>
    </div>
  </section>
</template>

<script>
import Vue from 'vue'
import Logo from '~/components/Logo.vue'
import AtComponents from 'at-ui'

Vue.use(AtComponents)

...

It works~

from at-ui.

koppthe commented on May 30, 2024

Try to use global css in Nuxt.js
https://github.com/nuxt/nuxt.js/blob/master/examples/global-css/nuxt.config.js
https://nuxtjs.org/api/configuration-css

from at-ui.

bluemix commented on May 30, 2024

I've set this config in nuxt.config.js,

  css: [
    // Load a node module directly (here it's a SASS file)
    'at-ui-style',
    // CSS file in the project
    '@/assets/css/main.css',
    // SCSS file in the project
    '@/assets/css/main.scss'
  ]

and got this,

 ERROR  Failed to compile with 2 errors                                                                                                                             

These relative modules were not found:

* ../assets/css/main.css in ./node_modules/babel-loader/lib?{"babelrc":false,"cacheDirectory":true,"presets":["/Users/bluemix/Odoo_OpendEduCat/auc_nuxtjs/node_modules/babel-preset-vue-app/dist/index.common.js"]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0&bustCache!./.nuxt/App.vue
* ../assets/css/main.scss in ./node_modules/babel-loader/lib?{"babelrc":false,"cacheDirectory":true,"presets":["/Users/bluemix/Odoo_OpendEduCat/auc_nuxtjs/node_modules/babel-preset-vue-app/dist/index.common.js"]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0&bustCache!./.nuxt/App.vue

from at-ui.

koppthe commented on May 30, 2024

it seem that main.css and main.scss are not in your relative path.

from at-ui.

bluemix commented on May 30, 2024

and the solution? :)

from at-ui.

bluemix commented on May 30, 2024

here is the full nuxt.config.js file,

module.exports = {
  /*
  ** Headers of the page
  */
  head: {
    title: 'aux_nuxtjs',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'AUC Odoo' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  /*
  ** Customize the progress bar color
  */
  loading: { color: '#3B8070' },
  /*
  ** Build configuration
  */
  build: {
    /*
    ** Run ESLint on save
    */
    extractCSS: true,
    extend (config, ctx) {
      if (ctx.dev && ctx.isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }
  },
  css: [
    // Load a node module directly (here it's a SASS file)
    'at-ui-style',
    // CSS file in the project
    '@/assets/css/main.css',
    // SCSS file in the project
    '@/assets/css/main.scss'
  ]
}

from at-ui.

bluemix commented on May 30, 2024

now it works 👍
thanks a lot @koppthe

from at-ui.

SyntaxError: Invalid or unexpected token => @charset "UTF-8"; about at-ui HOT 7 CLOSED

Comments (7)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent