Не удалось разрешить абсолютные пути url () для фоновых изображений в CSS с помощью Webpack

у меня есть следующая конфигурация Webpack (грубо говоря, она была упрощена для этого поста):

const rootPublic = path.resolve('./public');
const LOCAL_IDENT_NAME = 'localIdentName=[name]_[local]_[hash:base64:5]';
const CSS_LOADER = `css?sourceMap&${LOCAL_IDENT_NAME}&root=${rootPublic}`;
const SASS_LOADER = 'sass?sourceMap&includePaths[]=' + path.resolve(__dirname, './src/styles');

// ... loaders:

loaders: [
  {
    test: /.(jpe?g|png|gif|svg)$/,
    loader: 'url-loader?limit=10000&name=[path][name].[ext]'
  },
  {
    test: /.scss$/,
    loader: config.DEVELOPMENT_MODE ? `style!${CSS_LOADER}!autoprefixer!${SASS_LOADER}`
                : ExtractTextPlugin.extract('style', `${CSS_LOADER}!autoprefixer!${SASS_LOADER}`)
  }, // ...
]

теперь это отлично работает для изображений, на которые обычно ссылаются в файлах scss:

.some-static-class {
  background: url('/images/bg.png');
}

однако,не при использовании :

:local .SomeClass {
  background: url('/images/bg.png');
}

и я думаю, что это потому что root определяется для загрузчика CSS. Я получаю ошибку сборки:Module not found: Error: Cannot resolve 'file' or 'directory' ./../../../../../../../../images/bg.gif

если вместо этого я удаляю root от css-loader config, затем он строит нормально, но затем путь "выглядит" правильным в инспекторе Chrome, но когда вы фактически открываете ссылку на новой вкладке, он указывает на:chrome-devtools://devtools/bundled/"/images/bg.png" что явно не правильно.

Я не уверен, что проблема заключается в url-loader config, или что именно происходит.

я играл с различными конфигурациями webpack, чтобы указать решение.корень, решимость.modulesDirectories и т. д., но полностью не уверен, что они влияют или если я просто все делаю неправильно. Я тоже наткнулся resolve-url-loader но не уверен, что это вообще то, что мне нужно.

какие идеи? Приводе mtia!

обновление

я должен отметить, что он отлично работает в Safari, но не в Chrome. Таким образом, это похоже на ошибку Chrome, но это не практично, чтобы сделать все наши разработки в Safari.

я тоже сталкивался, Vue-style-loader, которое вилка стиль-затяжелителя это утверждает, чтобы исправить эту проблему, но так, как она исправляет это, полагаясь на хакерский устаревший метод escape/unescape.

7
urlloader webpack webpack-dev-server webpack-style-loader

2 ответов

одно из возможных решений, которое я мог придумать, было следующее:

использовать resolve-url-loader (сразу после sass-loader):

style!${CSS_LOADER}!autoprefixer!resolve-url!${SASS_LOADER}

затем определите решения.псевдоним для статических изображений:

resolve: {
  alias: {
    images: path.join(__dirname, 'public/images')
  }
}

и затем в CSS, вы можете указать на изображения, как так:

:local .SomeClass {
  background: url('images/bg.png');
}

в зависимости от вашей структуры URL, вам также может потребоваться настроить url-loader имя param:

{
  test: /\.(jpe?g|png|gif|svg)$/,
  loader: 'url-loader?limit=10000&name=images/[name].[ext]'
}

поэтому я не знаю, есть ли более чистый способ решить эта проблема, но это лучшее, что я мог придумать до сих пор. Я приветствую любые отзывы или альтернативы.

спасибо!

обновление 6/30/2016

есть пара PR, которые будут решать эту проблему, но сопровождающий предпочитает, чтобы решение было в CSS AST, а не в CSS погрузчик...

https://github.com/webpack/style-loader/pull/124 https://github.com/webpack/style-loader/pull/96

здесь надеется, что с этим произойдет в ближайшее время...

5

С webpack 2:

в вашей .файлы scss используют ~ перед путем.

.yourClass {
      background: url('~img/wallpaper.png');
}

используйте корень разрешения из webpack, добавьте это в свой webpack.конфиг.js:

resolve: {
        modules: [
            path.resolve(root),
            'node_modules'
        ]
    },

Он должен работать также для @import, например @import " ~otherfile.scss"

1