Angular Kendo-ui scss，无法构建 webpack

Question

在 scss 文件中包含 kendo ui 默认主题后，Webpack 将无法构建。

我收到的错误信息是：

./src/app/vendor/kendo-ui/theme.scss 中的错误 模块构建失败：TypeError：URL.startsWith 不是函数

我了解发生此错误是因为 URL 不是字符串，但是我们使用的代码在 angular 4 中运行良好，只是转移到 angular 5 才发生此问题。

任何关于它的建议将不胜感激

剑道是这样导入的：

@import '~@progress/kendo-theme-default/scss/all';

scss 的 webpack 代码如下所示

{
    test: /\.scss$|\.sass$/,
        use: [
             'exports-loader?module.exports.toString()',
             {
                 loader: 'css-loader',
                 options: {
                     sourceMap: false,
                     importLoaders: 1
                 }
             },
             {
                 loader: 'postcss-loader',
                 options: {
                     ident: 'postcss',
                     plugins: postcssPlugins
                    }
             },
             {
                  loader: 'sass-loader',
                  options: {
                      sourceMap: false,
                      precision: 8,
                      includePaths: []
                  }
             }
      ]
}

postcssPlugins 函数..

const postcssPlugins = function () {
// safe settings based on: https://github.com/ben-eb/cssnano/issues/358#issuecomment-283696193
const importantCommentRe = /@preserve|@license|[@#]\s*source(?:Mapping)?URL|^!/i;
const minimizeOptions = {
    autoprefixer: false,
    safe: true,
    mergeLonghand: false,
    discardComments: { remove: (comment) => !importantCommentRe.test(comment) }
};
return [
    postcssUrl({
        url: (URL) => {
            // Only convert root relative URLs, which CSS-Loader won't process into require().
            if (!URL.startsWith('/') || URL.startsWith('//')) {
                return URL;
            }
            if (deployUrl.match(/:\/\//)) {
                // If deployUrl contains a scheme, ignore baseHref use deployUrl as is.
                return `${deployUrl.replace(/\/$/, '')}${URL}`;
            }
            else if (baseHref.match(/:\/\//)) {
                // If baseHref contains a scheme, include it as is.
                return baseHref.replace(/\/$/, '') +
                    `/${deployUrl}/${URL}`.replace(/\/\/+/g, '/');
            }
            else {
                // Join together base-href, deploy-url and the original URL.
                // Also dedupe multiple slashes into single ones.
                return `/${baseHref}/${deployUrl}/${URL}`.replace(/\/\/+/g, '/');
            }
        }
    }),
    autoprefixer(),
    ].concat(minimizeCss ? [cssnano(minimizeOptions)] : []);
};

使用

• 角度：5.2.7
• webpack：3.11.0
• "@progress/kendo-theme-default": "^2.48.1",

Answer 1

更新：

看看你发布的代码，我做了几个假设

1. postcssUrl(....)这个函数来自npm包postcss-url
2. 您正在使用 Angular CLI

从 Angular CLI 1.6.0-rc0 开始，npm 包 postcss-url 从 ^5.1.2 更新为 7.1.2 (commit)

从postcss-url@6.0.0 开始，url 选项已更改，因此它接受的函数被赋予不同的参数，URL 曾经是第一个参数，但现在包含在一个对象中。

您可以查看旧参数here和当前参数here

希望这会有所帮助！

---

原文：

根据您发布的错误，您的 postcssPlugins 函数中的 URL 参数似乎不是字符串类型。

我建议将console.log(URL) 放在函数顶部，以查看它返回的内容，因为输入参数的类型可能在版本之间发生了变化。