如何让 postcss 配置与 Nuxt 一起使用？

Posted 2023-03-06

【中文标题】如何让 postcss 配置与 Nuxt 一起使用？

【英文标题】：How to get postcss config working with Nuxt?

【发布时间】：2019-08-11 06:35:05

【问题描述】：

我的 Nuxt 项目没有从 nuxt.config.ts 获取 postcss-import 的配置：

build: 
    postcss: 
        plugins: 
            "postcss-import": 
                path: ["../assets/css", "../components/@css", "../components"]
            
        
    

我收到类似Error: Can't resolve 'style.css' in /projectroot/pages 的错误。

postcss.config.js 中的相同配置被正确拾取。为了测试，如果我将 postcss.config.js 更改为指向不存在的目录，则错误变为：Error: Failed to find 'style.css' in [list of configured directories]。

我应该怎么做才能让 nuxt.config.ts 正常工作？请注意，我使用的是 Typescript (nuxt-ts)。

【问题讨论】：

我没有使用 postcss，但在我的 nuxt 配置中，我在引用文件夹时使用了~。例如："~/plugins/stackify"。尝试用“~”替换“..”

感谢您的评论。是的，我试过了，但这并没有解决它。使用 postcss.config.js 时，错误消息会指示它尝试的目录列表，但使用 nuxt.config.ts 时不会。它似乎没有拿起配置。

【参考方案1】：

我就是这样使用它的：

我像往常一样导入一个css文件并在nuxt.config.js的build属性上添加postcss配置@

  css: ['~/assets/css/tailwind.css'],
  build: 
    postcss: 
      plugins: 
        'postcss-import': true,
      
    
  

From NuxtJS docs

有了这个配置，我还可以在 Vue 文件中使用 <style lang="postcss"> 标签。

【参考方案2】：

我有一个名为 postcs-s-rc.js 的文件

    "plugins": 
          "postcss-import": ,
          "postcss-url": ,
          // to edit target browsers: use "browserslist" field in package.json
          "autoprefixer": 
          

我删除了它并在文件 nuxt.config.js 中添加下一个代码：

        build: 
        postcss: 
          plugins: 
          "postcss-import": ,
          "postcss-url": ,
          // to edit target browsers: use "browserslist" field in package.json
          "autoprefixer": 
          
        
      

然后我在 package.json 中运行脚本：

"build":"nuxt build"