Question

我认为最佳做法是拥有一个具有所有基本样式（如原色等）的全局.scss文件。
然后，对于每个React组件，您都编写了它自己的模块，以使其保持干净，并且.css需要最小导入。

使用这种方法，我会收到一个奇怪的错误。

我有一个styles/global.scss文件，

$primary-color: #6dd3d6;

body {
    margin: 0;
    padding: 0;
}

现在我还有一个名为NavBar.module.scss的文件，其内容如下：

@import "styles/global";

.nav {
    display: flex;
    padding: 20px;
    background: $primary-color;
}

我的_app.js文件：

import React from 'react';
import '../styles/global.scss'

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}

和我的NavBar.js文件：

import React from 'react';
import styles from './NavBar.module.scss';

export default function NavBar() {
    return(
    <nav className={styles.nav}>
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </nav>
    );

}

这给了我以下错误：

./components/NavBar.module.scss:3:1
Syntax error: Selector "body" is not pure (pure selectors must contain at least one local class or id)

  1 | $primary-color: #6dd3d6;
  2 | 
> 3 | body {
    |                ^
  4 |     margin: 0;
  5 |     padding: 0;

Answer 1

您不能在模块中使用body选择器，如错误消息中所述：“ 选择器” body“不纯（纯选择器必须至少包含一个本地类或id）< / em>”。

创建另一个仅包含变量的Sass文件，并将其导入模块/全局Sass文件中。

由问题作者编辑以提供其他信息：
在任何global.scss类中导入.module.scss也是错误的，这会导致错误。这是一种全局样式，无需重新导入。

在sass模块中使用全局sass样式表中的变量

1 个答案: