Sass导入错误的目录

Question

我有以下的heirarchy：

main.scss
styles/_partial.scss
fonts/

在main.scss：

@font-face {
    font-family: 'ProximaNova';
    src: url('./fonts/ProximaNova-Regular.otf');
}

导入此处不会导致任何问题。但是在styles/_partial.scss我有：

@import '../main';

这会导致问题。显然正在发生的事情是_partial.scss正在导入main.scss，但是当它尝试导入字体时，它会查找styles/fonts/..（partial.scss当前目录）而不是main.scss当前。目录

我正在使用Webpack，这是我得到的错误：

ERROR in ./~/css-loader!./~/sass-loader!./src/app/styles/_partial.scss
Module not found: Error: Cannot resolve 'file' or 'directory' ./fonts/ProximaNova-Regular.otf in /src/app/styles

Answer 1

通常，您将部分内容导入main.scss，而不是相反。 Main将有@import 'styles/partial.scss';（注意：这里没有下划线） 然后字体网址也会起作用，因为路径是相对于基础文件main.scss。