Используйте сахара с nuxt 2

Я пытаюсь использовать 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, ни конфигурация специального каталога не были пустыми.

Заранее спасибо!

Поиск всех неиспользуемых файлов в проекте
Поиск всех неиспользуемых файлов в проекте
Количество файлов в проекте растет по мере его развития. И если быть по-настоящему честным, их продвижение происходит в геометрической прогрессии...
Настройка шаблона Metronic с помощью Webpack и Gulp
Настройка шаблона Metronic с помощью Webpack и Gulp
Я пишу эту статью, чтобы поделиться тем, как настроить макет Metronic с помощью Sass, поскольку Metronic предоставляет так много документации, и они...
0
0
560
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я смог понять это, 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] },
    ],
})

Привет, я JGJP из выпуска GH, на который вы ссылались в своем вопросе. Ваше решение позволяет писать SugarSS в файлах .vue? Если да, то что вы пишете в атрибуте lang? Спасибо

J Garcia 05.07.2019 05:32

Да, это так! В частности, у меня есть один файл, на который я смотрю, он примерно соответствует вашим ожиданиям: <style lang = "sss">. (моя подсветка синтаксиса работает неправильно, но я просто переключаю ее на <style lang = "sass">, когда на самом деле пытаюсь с ней работать, и это достаточно близко)

blaineh 06.07.2019 07:21

Здорово! Причина, по которой я спрашиваю, заключается в том, что я придумал другое решение этой проблемы, ваше кажется лучше, поэтому я переключусь на ваше и, надеюсь, смогу обновить пакет подсветки синтаксиса Sublime Text для распознавания lang = "sss"

J Garcia 09.07.2019 02:57

Как вы думаете, вы могли бы опубликовать рабочий шаблон? Он не интерпретирует мои файлы sss или мои модули как Sugarss

J Garcia 11.07.2019 09:35

Другие вопросы по теме