在nuxt 2上使用Sugarss

Question

我正在尝试在我的nuxt项目中使用postcss sugarss syntax。

我尝试了多种方法：

向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样式加载器链，但是我不确定该怎么做。我查看了这个boilerplate example from JGJP，但他使用的是nuxt 1.0版本，并且他要导入的'nuxt/lib/builder/webpack/style-loader.js'文件不再存在。 Nuxt在packages/webpack/src/utils/style-loader.js中有一些类似的概念，但是我无法导入这些概念，此外，我什至不知道这会有所帮助。

我也找不到任何有人向nuxt添加非标准样式表语法的示例。

将我的build.postcss.parser设置为sugarss，这会导致.nuxt目录等地方的所有 normal css中断。

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文件，这样只有 my 个css文件用这种方式解析。但这是行不通的，我 still 仍然收到上述.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配置和特殊目录配置都不为空。

谢谢！

Answer 1

我能够通过with解析传入console.log的现有config.module.rules并进行无耻复制来解决这个问题。这是我最终得到的解决方案。

extend(config)