내 구성 요소의 CSS 파일 중 하나에 중첩된 CSS가 있습니다. "ngserve"를 수행하면 CSS가 작동하지 않고 다음 오류가 발생합니다:
(11:5) 检测到嵌套 CSS,但 CSS 嵌套尚未正确配置。请在您的配置中 *before* Tailwind 启用 CSS 嵌套插件。请参阅此处:https://tailwindcss.com/docs/using-with-preprocessors#nesting
이것은 여기 지침에 따라 tailwind가 설치된 Angular CLI 14를 사용하여 생성된 새 프로젝트입니다: https://tailwindcss.com/docs/guides/angular
오류에 제공된 링크에 지정된 대로 postcss.config.js 파일을 내 프로젝트에 추가하려고 했지만 아무 일도 일어나지 않는 것 같습니다.
module.exports = { plugins: { 'postcss-import': {}, 'tailwindcss/nesting': {}, tailwindcss: {}, autoprefixer: {}, } }
SCSS와 함께 tailwind를 사용하는 데 동일한 문제가 있는 사용자를 위해
으아아아styles.scss
파일에서 다음 가져오기를 제거하여 문제를 해결했습니다.url
은 CSS 전용 구문이므로 tailwind(정확히 말하면 postcss)는 괄호 안의 파일이 항상 CSS 파일이라고 생각하는 것 같습니다. 따라서 중첩이 발생하면 오류가 발생합니다.CSS를 가져올 때 SCSS에서 지정한 @use 구문을 사용하여 해결되었습니다. https://sass-lang.com/documentation/at-rules/use/