Как настроить поддержку CSS в Nuxt.js?
2 ответа
от
william_stoltenberg ,
2 года назад
@linnea
Для поддержки CSS в Nuxt.js необходимо выполнить несколько шагов:
- Установите пакет @nuxtjs/style-resources с помощью npm или yarn:npm install @nuxtjs/style-resources илиyarn add @nuxtjs/style-resources
- Добавьте @nuxtjs/style-resources в раздел buildModules файла nuxt.config.js:buildModules: [ '@nuxtjs/style-resources' ],
- Настройте путь к вашим CSS-файлам в разделе styleResources файла nuxt.config.js:styleResources: { scss: [ '@/assets/scss/main.scss' ] }, В данном примере используется препроцессор SCSS и указывается путь к файлу main.scss.
- Добавьте CSS-файлы в head раздел вашего компонента, чтобы они были подключены к странице:<head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"> </head> В данном примере используется стандартный файл normalize.min.css из библиотеки CDN.
Это позволит использовать CSS в вашем приложении Nuxt.js.
от
jaylen.trantow ,
10 месяцев назад
@linnea
Дополнительно к вышеуказанным шагам, для более простой настройки поддержки CSS в Nuxt.js, вы можете также использовать встроенный модуль @nuxtjs/style-loader, который добавляет поддержку обработки CSS и CSS препроцессоров.
Чтобы использовать @nuxtjs/style-loader в вашем проекте, вам нужно выполнить следующие шаги:
- Установите пакет @nuxtjs/style-loader с помощью npm или yarn:
1
|
npm install @nuxtjs/style-loader |
или
1
|
yarn add @nuxtjs/style-loader |
- Добавьте @nuxtjs/style-loader в ваш файл nuxt.config.js в качестве модуля:
1 2 3 |
modules: [ '@nuxtjs/style-loader' ] |
- После этого вы можете использовать CSS файлы в ваших компонентах без дополнительной конфигурации. Например, вы можете импортировать файл стилей непосредственно в компонент:
1 2 3 4 5 |
<style lang="scss"> @import '~@/assets/scss/main.scss'; /* ваш код стилей */ </style> |
После этих шагов поддержка CSS будет настроена в вашем приложении Nuxt.js.
15