PostCss 模块和 next.js答案

【问题标题】：PostCss Modules and next.jsPostCss 模块和 next.js
【发布时间】：2018-03-17 11:13:09
【问题描述】：

我将 PostCSS http://cssnext.io/ 与我的 Next.js 网站结合使用 butterCMS。我是 postcss 的新手，但喜欢他们正在尝试做的事情，但是来自 SASS 背景，我发现它似乎正在陷入困境，必须添加许多额外的模块和脚本才能使其正常工作这并没有给它比预处理器的主要优势。

在我的 package.json 中，我有以下模块：

"postcss-cssnext": "^3.0.2",
"postcss-easy-import": "^3.0.0",
"postcss-loader": "^2.0.6",
"postcss-modules": "^0.8.0",

在我的根目录中，我有一个 ./styles/ 文件夹，其中包含以下文件：

defaults.css

:root {
  /* Breakpoints */
  @custom-media --small (width >= 576px);
  @custom-media --medium (width >= 768px);
  @custom-media --large (width >= 1200px);

  /* Colors */
  --color-black: #000;
  --color-white: #fff;
  --color-vue-green: #42b983;

  /* Typography */
  --h1: 2rem;
  --h2: 1.5rem;
  --h3: 1.25rem;
  --h4: 1rem;
  --h5: 0.875rem;
  --h6: 0.75rem;

  /* Utilities */
  --accessibly-hidden: {
    position: absolute !important;
    display: block;
    visibility: visible;
    overflow: hidden;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
    clip: rect(0, 0, 0, 0);
    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  }

    --foo: {

      font-size:4em;
      color:green;}

}

styles.css

@import 'defaults.css';

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
}

h1 { font-size: var(--h1) }
h2 { font-size: var(--h2) }
h3 { font-size: var(--h3) }
h4 { font-size: var(--h4) }
h5 { font-size: var(--h5) }
h6 { font-size: var(--h6) }

.accessibly-hidden {
  @apply --accessibly-hidden;
}

.giantext{
  @apply --foo;
}


div {
  color: var(--color-vue-green);
}

.my-paragraph{
  composes: my-paragraph from 'shared.css';
}

.danger{
  composes: danger from 'shared.css';
}

在我的反应脚本中，我有：

<p className={classNames['my-paragraph']}>My homepage</p>
<p className={classNames.danger}> This background should be yellow</p>
<div>
  <p className={classNames.giantext}> I am huge </p>
</div>

只有composes 指令可以使用其余的实用程序，并且我的 next.js 中的 index.js 文件没有选择样式。其余部分给我以下警告/错误：

(Emitted value instead of an instance of Error) postcss-custom-properties: /Users/user/projects/qubase/styles/styles.css:25:3: variable '--color-vue-green' is undefined and used without a fallback

或者

(Emitted value instead of an instance of Error) postcss-apply: /Users/user/projects/qubase/styles.css:16:3: No custom property set declared for `accessibly-hidden`.

等

我缺少关于 postcss 的任何内容吗？

【问题讨论】：

标签： postcss next.js postcss-import

【解决方案1】：

这是我为消除这些消息所做的工作：

我添加了postcss.config.js 文件并在其中添加了以下代码：

const postcssCssNext = require('postcss-cssnext')
const postcssImport = require('postcss-import')

module.exports = {
    plugins: [
        postcssCssNext({
            features: {
                customProperties: {
                    warnings: false
                }
            }
        }),
        postcssImport
    ]
}

【讨论】：