У меня проблема, когда в sass файлах есть стили с таким кодом:
app.scss
body {
background: url(/img/test.png) no-repeat;
}
app.js
import './body.scss';
/*
.. js code
*/
То он ищет эту картинку относительно app.js, а мне не нужно этого, и хочется запретить
Нашел такое решение (ставить тильду):
app.scss
body {
background: url(~/img/test.png) no-repeat;
}
Но тогда, проблема в другом.
Если у нас проект в корневом каталоге
и мы запускаем index.html так
localhost:8080
Тогда все нормально
А если переместим проект в папку context и будем подключаться к нашему index.html так
localhost:8080/context
Теперь проблема, дело в том, что webpack подставляет css стили такие:
body {
background: url(img/test.png) no-repeat;
}
И браузер пишет ошибку, ибо пытается найти картинку по этому адресу
localhost:8080/img/test.png
Хотя я загрузил страницу так
localhost:8080/context
Вот конфиг вебпака:
module.exports = {
context: __dirname, // точка входа в приложение
entry: { // точки входа
core: './angular/vendor.js',
app: './angular/app.module.js'
},
output: { // выходные файлы
path: '../webapp/js/',
publicPath: '/js/',
filename: '[name].js',
library: '[name]'
},
module: {
loaders: [
{ // используем ES6 to ES5
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel', // 'babel-loader' is also a legal name to reference
query: {
presets: ['es2015'],
compact : false
}
},
{
test: /\.html$/,
loader: 'html'
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
test: /\.scss$/,
loaders: ['style', 'css', 'resolve-url', 'sass?sourceMap']
}
]
},
};
Простой
