Я пытаюсь использовать postcss синтаксис сахара в своем проекте nuxt.
Я пробовал разные вещи:
sss
к config.module.rules
(это то, что я бы предпочел).Вот в основном то, что я пробовал в nuxt.config.ts
и build.extend
:
// earlier on at the top level I have this
css: [ '@/assets/css/main.sss' ],
extend(config) {
config.module = config.module || { rules: [] }
config.module.rules.push({
test: /\.sss$/,
use: [
// 'vue-loader',
// 'style-loader',
// { loader: 'css-loader', options: { importLoaders: 1 } },
'postcss-loader?parser=sugarss',
]
})
}
В этом примере (с фактически задействованным только postcss-loader
) не удается успешно добавить стили на отображаемую страницу. Так, например, с этими файлами:
/* tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
// main.sss
@import './tailwind.css'
a
color: green
ссылки не зеленые, и ни одна из утилит попутного ветра не работает.
Я знаю, что nuxt — это обработка этих файлов, потому что, если я сделаю в них синтаксические ошибки, сборка завершится ошибкой.
Раскомментирование любого из этих других загрузчиков также не помогает ни в одной комбинации, которую я пробовал, но я признаю, что просто стреляю в темноту.
Я совершенно уверен, что проблема с этим подходом заключается в том, что я неправильно подключаюсь к цепочке загрузчика в стиле веб-пакета nuxt, но я не уверен, как это сделать. Я посмотрел на этого шаблонный пример из JGJP, но он использует версию nuxt 1.0, а файл 'nuxt/lib/builder/webpack/style-loader.js'
, который он импортирует, больше не существует. У Nuxt есть похожие концепции в packages/webpack/src/utils/style-loader.js
, но я не смог их импортировать, и, кроме того, я даже не уверен, что это поможет.
Я также не могу найти примеры людей, добавляющих нестандартный синтаксис таблиц стилей в nuxt.
build.postcss.parser
на sugarss
, что приводит к поломке всего CSS обычный в таких местах, как каталог .nuxt
.ERROR in ./.nuxt/components/nuxt-loading.vue?vue&type=style&index=0&lang=css&
Syntax Error: SyntaxError
(157:16) Unnecessary curly bracket
155 |
156 |
> 157 | .nuxt-progress {
| ^
158 | position: fixed;
159 | top: 0px;
postcss.config.js
в мой каталог src
с parser
, установленным на sugarss
, чтобы таким образом анализировались только файлы css мой. Но это не работает, я еще получаю ошибки .nuxt
, описанные выше, а также эти предупреждения:WARN Please use build.postcss in your nuxt.config.js instead of an external config file. Support for such files will be removed in Nuxt 3 as they remove all defaults set by Nuxt and can cause severe problems with features like alias resolving inside your CSS.
WARN You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js.
Второе предупреждение не имеет большого смысла, так как ни конфигурация nuxt.build.postcss
, ни конфигурация специального каталога не были пустыми.
Заранее спасибо!
Я смог понять это, console.info
передав существующий config.module.rules
в extend(config)
и бесстыдно скопировав его. Вот решение, с которым я столкнулся.
const vueStyle = { loader: 'vue-style-loader', options: { sourceMap: true } }
const css = {
loader: 'css-loader',
options: {
sourceMap: true,
importLoaders: 2,
exportOnlyLocals: false
}
}
const postcss = {
loader: 'postcss-loader',
options: {
parser: 'sugarss',
sourceMap: true,
plugins,
order: 'presetEnvAndCssnanoLast'
}
}
const cssModule = {
...css,
options: {
...css.options,
localIdentName: '[local]_[hash:base64:5]',
modules: true,
},
}
config.module.rules.push({
test: /\.sss$/,
oneOf: [
{ resourceQuery: /module/, use: [vueStyle, cssModule, postcss] },
{ use: [vueStyle, css, postcss] },
],
})
Да, это так! В частности, у меня есть один файл, на который я смотрю, он примерно соответствует вашим ожиданиям: <style lang = "sss">
. (моя подсветка синтаксиса работает неправильно, но я просто переключаю ее на <style lang = "sass">
, когда на самом деле пытаюсь с ней работать, и это достаточно близко)
Здорово! Причина, по которой я спрашиваю, заключается в том, что я придумал другое решение этой проблемы, ваше кажется лучше, поэтому я переключусь на ваше и, надеюсь, смогу обновить пакет подсветки синтаксиса Sublime Text для распознавания lang = "sss"
Как вы думаете, вы могли бы опубликовать рабочий шаблон? Он не интерпретирует мои файлы sss или мои модули как Sugarss
Привет, я JGJP из выпуска GH, на который вы ссылались в своем вопросе. Ваше решение позволяет писать SugarSS в файлах .vue? Если да, то что вы пишете в атрибуте lang? Спасибо