将sugarss与nuxt 2一起使用

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 目录等位置的所有正常 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 文件会以这种方式被解析。但这不起作用，我仍然收到上述.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

我能够通过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] },
    ],
})