SCSS генерирует неправильный URL для фона - PullRequest
0 голосов
/ 03 декабря 2018

У меня есть проект, в котором я использую шаблон ReactTS из DotNet.Я установил SCSS и все работает, кроме фонов.

Изображения и scss скомпилированы в папку dist (scss в файле style.css).Все изображения скомпилированы правильно и могут вызываться с использованием обычного CSS, но проблема заключается в scss, так как url() также содержит dist перед фактическим URL, в то время как сам файл CSS уже находится в dist папка.Это означает, что CSS ищет изображение внутри /dist/dist/{image}.png} вместо /dist/{image}.png}.

Поскольку я не могу просто отредактировать файл dist/style.css напрямую, как я могу убедиться, что путь будетправильный?

Редактировать: После изменения URL в инспекторе, я могу подтвердить, что /dist/{image}.png} действительно будет работать.Проблема в том, что внутри css он background-image: url('dist/{image}.png), где он должен быть только url('{image}.png.Это внутри файла css, который создается в папке dist.

Редактировать 2:

Uncompiled site.scss

html {
    background-image: url('../img/backgrounds/background1.jpg');
    background-size: cover;

    ...
}

Скомпилированный style.css

html {
    background-image: url(dist/fc5316d2f76725be344cc36eb98c28f7.jpg);
    background-size: cover; 
}

Структура папок

├───ClientApp
│   ├───css
|   |   └───site.scss
|   └───img
|       └───background1.jpg
└───wwwroot
    └───dist
        ├───style.css
        └───fc5316d2f76725be344cc36eb98c28f7.jpg

Редактировать 3:

webpack.config.js

    ...

    output: {
        path: path.join(__dirname, bundleOutputDir),
        filename: '[name].js',
        publicPath: 'dist/'
    },
    module: {
        rules: [
            ...
            { test: /\.s?css$/, include: /ClientApp/, use: ExtractTextPlugin.extract({ use: ['css-loader', 'sass-loader'] }) },
            { test: /\.(png|jpg|jpeg|gif|svg)$/, loader: 'url-loader?limit=25000' }
        ]
    },
    plugins: [
        ...
        new ExtractTextPlugin({
            filename: 'style.css'
        })
    ]

    ...
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...