Используйте Sugarss с nuxt 2 - PullRequest
Новая
       36

Используйте Sugarss с nuxt 2

0 голосов
/ 21 мая 2019

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

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

1 Ответ

1 голос
/ 22 мая 2019

Я смог выяснить это, console.log скопировав существующий 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] },
    ],
})
...