现在可以将嵌套与 css 模块一起使用吗？答案

【问题标题】：Is it possible to use nesting with css modules right now?现在可以将嵌套与 css 模块一起使用吗？
【发布时间】：2021-09-16 19:03:54
【问题描述】：

我目前正在尝试将 CSS Modules 类和 PostCSS 的嵌套功能与 TailwindCSS 一起使用在同一个文件中。但是当在我的Sidebar.module.css 中做这样的事情时：

.sidebar {
    @apply fixed top-0 left-0 h-full w-64;
    &.closed {
     @apply w-20;
    }
}

Chrome 似乎没有被拾取，并且这个警告出现在检查器中： Warning saying Unknown property name

所以我首先不确定这是否可能。这是我的postcss.config.js

module.exports = {
  plugins: [
    require('tailwindcss/nesting'),
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}

【问题讨论】：

标签： css tailwind-css postcss css-modules

【解决方案1】：

如果您想使用模块样式的 CSS 导入，请按照此doc 请检查您的应用设置。

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss/nesting'),
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}

【讨论】：

如果您使用 NextJS，是否需要这样做？我以为帖子是附带的？

【解决方案2】：

This guide 并使用以下 postcss.config.js 设置对我有用。

module.exports = {
  plugins: {
    'postcss-import': {},
    'tailwindcss/nesting': {},
    'postcss-nesting': {},
    tailwindcss: {},
    'postcss-flexbugs-fixes': {},
    'postcss-preset-env': {
      autoprefixer: {
        flexbox: 'no-2009'
      },
      stage: 3,
      features: {
        'custom-properties': false,
        'nesting-rules': true
      }
    }
  }
}

【讨论】：