@import "src/common/styles/global-styles.scss";
@import "node_modules/bootstrap/scss/bootstrap";
@import "src/common/styles/palette.scss";
@import "src/common/styles/typography.scss";
.dashboard-dropdown-hover {
@extend .px-1;
@extend .py-2;
@extend .mt-3;
border: 1px solid transparent;
border-radius: 8px;
transition: 200ms;
background-color: transparent;
}
.dashboard-dropdown-hover:hover {
background-color: $cl-light-gray;
}有没有人可以解决我应该如何解决这个导入问题？我知道如果我切换回 .scss 它将起作用，但我试图避免在 _app.tsx 中导入所有 .scss 文件，因为那将是至少 30 次导入，而且这些样式也不打算是全局的.最后，当我使用 Sass 时，为什么 Next.js 期望我使用纯 css 选择器，因为它的非纯元素而被使用？
回答1
在互联网上搜索了几个小时后，我从这里找到了一个很好的解决方案：https://dhanrajsp.me/snippets/customize-css-loader-options-in-nextjs
/** @type {import('next').NextConfig} */
require("dotenv").config();
const regexEqual = (x, y) => {
return (
x instanceof RegExp &&
y instanceof RegExp &&
x.source === y.source &&
x.global === y.global &&
x.ignoreCase === y.ignoreCase &&
x.multiline === y.multiline
);
};
// Overrides for css-loader plugin
function cssLoaderOptions(modules) {
const { getLocalIdent, ...others } = modules; // Need to delete getLocalIdent else localIdentName doesn't work
return {
...others,
localIdentName: "[hash:base64:6]",
exportLocalsConvention: "camelCaseOnly",
mode: "local",
};
}
module.exports = {
webpack: (config) => {
const oneOf = config.module.rules.find(
(rule) => typeof rule.oneOf === "object"
);
if (oneOf) {
// Find the module which targets *.scss|*.sass files
const moduleSassRule = oneOf.oneOf.find((rule) =>
regexEqual(rule.test, /\.module\.(scss|sass)$/)
);
if (moduleSassRule) {
// Get the config object for css-loader plugin
const cssLoader = moduleSassRule.use.find(({ loader }) =>
loader.includes("css-loader")
);
if (cssLoader) {
cssLoader.options = {
...cssLoader.options,
modules: cssLoaderOptions(cssLoader.options.modules),
};
}
}
}
return config;
},
};我不熟悉 webpack 或者它是如何工作的，但是这个解决方案对我有用。如果需要，您还可以通过 (scss|sass|css) 更改正则表达式以包含 css。