使用最新的Next.js，我可以在pages/_app.js中全局导入Sass样式，使用import '../styles/global.scss';指令，而不依赖于@zeit/next-sass。
这在组件级别工作吗?例如，我可以有一个components/*目录来保存我的组件，并且每个组件都有一个*.tsx文件来导入*.module.scss文件吗?
这对我现在不起作用。我没有得到错误，但组件级样式不加载，而全局样式加载。
编辑:要清楚，我做不是想要导入一个对象，如import styles from ...scss。我只想为这个组件导入Sass，而不是任何有属性的对象。
这是一个代码示例，当我用npx run dev运行它时，我可以看到globals.scss样式，但不能看到Main.module.scss样式。
从零开始，我运行npx create-next-app _，然后npm install sass。只有五个重要的文件，一旦我做了一个简单的Main组件，我想样式:
components/Main/Main.tsx:
import './Main.module.scss';
export default function Main() {
return <div className="Main">Main</div>;
};
components/Main/Main.module.scss:
此规则由于某些原因未应用!
.Main {
color: blue;
}
pages/_app.js:
这些全局样式会被应用!
import '../styles/globals.scss';
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
};
pages/index.js:
import Head from 'next/head';
import Main from '../components/Main/Main';
export default function Home() {
return (
<div>
<Head>
<title>Create Next App</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<Main />
</div>
)
};
styles/globals.scss:
这个样式规则被应用，但上面的color: blue不被应用。
* {
box-sizing: border-box;
}
因为Sass模块在使用它们的模块中限定了类名的范围，所以您需要将其作为对象导入(在本例中为styles)，并且每个类都作为导入对象的属性访问。
import styles from './Main.module.scss';
export default function Main() {
return <div className={styles.Main}>Main</div>;
};