Question

当我不知道应用程序根目录的位置时，我试图在我的Angular项目的SASS中使用背景图像。例如，应用的主页可能是：

localhost:9000/home

或

localhost:9000/foo/home

或

localhost:9000/bar/home

我想我可以通过在背景图像属性中相对地设置路径来解决这个问题，如下所示：

div {
    background-image: url("assets/smiley.png");
}

但是，这不起作用。当我编译应用程序时，它无法找到资产。在控制台中，它说：

Error: Can't resolve './assets/smiley.png'

无论我的背景图片网址值是否以./开头，它都会给我同样的信息。但即便./我想也应该有用。

如果我将路径硬编码到background-image属性中，使路径为ABSOLUTE，那么有什么用呢：

div {
    background-image: url("/foo/assets/smiley.png");
}

但是，这不是一个选项，因为我不知道应用根目录是否在/ foo /或/ bar /或其他地方。

另一件可行的方法是使用ng build的--base-href选项对路径进行硬编码，如下所示：

ng build --base-href /foo/

但是如果可能的话，我真的很想通过代码更改来实现这一目标，而这些代码更改并不涉及在逐个构建的基础上将参数传递给ng build命令。

这是我的Webpack Config，位于node_modules/@angular/cli/models/webpack-config.js。那是正确的文件吗？对不起，如果不是 - 我对webpack非常不熟悉：

/**
 * Adapted from angular2-webpack-starter
 */

const helpers = require('./config/helpers'),
    webpack = require('webpack');

/**
 * Webpack Plugins
 */
const ProvidePlugin = require('webpack/lib/ProvidePlugin');
const DefinePlugin = require('webpack/lib/DefinePlugin');
const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin');

module.exports = {
    devtool: 'inline-source-map',

    resolve: {
        extensions: ['.ts', '.js']
    },

    entry: helpers.root('ng2-translate.ts'),

    output: {
        path: helpers.root('bundles'),
        publicPath: '/',
        filename: 'ng2-translate.umd.js',
        libraryTarget: 'umd',
        library: 'ng2-translate'
    },

    // require those dependencies but don't bundle them
    externals: [/^\@angular\//, /^rxjs\//],

    module: {
        rules: [{
            enforce: 'pre',
            test: /\.ts$/,
            loader: 'tslint-loader',
            exclude: [helpers.root('node_modules')]
        }, {
            test: /\.ts$/,
            loader: 'awesome-typescript-loader?declaration=false',
            exclude: [/\.e2e\.ts$/]
        }]
    },

    plugins: [
        // fix the warning in ./~/@angular/core/src/linker/system_js_ng_module_factory_loader.js
        new webpack.ContextReplacementPlugin(
            /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
            helpers.root('./src')
        ),

        new webpack.LoaderOptionsPlugin({
            options: {
                tslintLoader: {
                    emitErrors: false,
                    failOnHint: false
                }
            }
        })
    ]
};

在SASS背景图像中使用相对路径

0 个答案: