Webpack, sass, 使用 url 导入 css答案

【问题标题】：Webpack, sass, Import css with urlWebpack, sass, 使用 url 导入 css
【发布时间】：2016-11-03 17:22:59
【问题描述】：

我导入了一个带有相对 URL 声明的字体的 css 文件。

@import '~materialize-css/dist/css/materialize.min';

.register-container {
  @extend .row;
}

我使用 raw-loader!sass-loader 链，因为它是一种角度组件样式。

{
    test: /\.scss$/,
    include: PathHelper.getPathFromRoot('src', 'app', 'modules'),
    loader: 'raw!sass'
},

当我这样做时，正在复制具体化文件的内容。当我加载页面时，它会尝试从错误的目录加载字体，因为相对路径是错误的。

字体之所以有效，是因为我使用不同的加载器链将它们加载到不同的文件中。链是：css!resolve-url!sass?sourceMap

所以字体在那里，但问题是 css 的内容被复制了两次，它从前面的路径多次加载字体

我能做点什么吗？让 sass 加载器知道不要复制 css 内容？

【问题讨论】：

【解决方案1】：

可能有帮助吗？

$font-url: unquote("somefile.css");
@if variable-exists(font-url) {
  @import url($font-url);
} @else {
  @error "sorry no dice";
}

字符串函数

unquote($string)

从字符串中删除引号。

- (Sass::Script::Value::String) unquote($string)

从字符串中删除引号。如果字符串已经没有被引用，这将返回原样。

示例：

unquote("foo") => foo
unquote(foo) => foo

【讨论】：