0

在使用 webpack 和 sass-loader/style-loader/css-loader 时，我无法让浏览器成功找到背景图像。

路径似乎是正确的，因为每当我更改它时，编译过程都会失败，但事实上，没关系。

到目前为止，我已经...

零件

import React from 'react'

const Image = () => (
   <div className='sprite-container sprite-1'>
   </div>
)

export default Image

CSS

.sprite-container {
   width: 100px;
   height: 100px;
   border-radius: 100%;
   border: 1px solid blue; // I put this just to confirm the container div is there, which it is.
   background-image: url('/img/spritesheet.png');
   background-repeat: no-repeat;
   position: absolute;
   top: 250px;
   right: 20px;
}

.sprite-1 {
   background-position: -100px, -100px;
}

事实上，div 是透明的。容器在那里，但背景图像无法加载。我是在 Webpack 中编译 SASS 的新手，所以这可能与我的文件结构有关。

这是我的文件树的相关部分：

- src
   - static (all static assets are served from this folder)
      - img
         -- spritesheet.png
   - styles
         -- app.scss
   -- app-client.js (importing app.scss here)

我正在将其app.scss导入我的主 js 文件app-client.js（React 安装到应用程序）。

css 属性中给出的路径是否background-image需要相对于根目录或样式表？我假设根目录（/static）。

任何帮助表示赞赏。

更新

文件树

- src
   - static (all static assets are served from this folder)
      - img
         -- spritesheet.png
      - js
         -- bundle.js
   - styles
         -- app.scss
   -- app-client.js (importing app.scss here)

webpack.config.js

const debug = process.env.NODE_ENV !== "production";

const webpack = require('webpack');
const path = require('path');

// const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  devtool: debug ? 'inline-sourcemap' : null,
  entry: path.join(__dirname, 'src', 'app-client.js'),
  devServer: {
    inline: true,
    port: 3333,
    contentBase: "src/static/",
    historyApiFallback: {
      index: '/index-static.html'
    }
  },
  output: {
    path: path.join(__dirname, 'src', 'static', 'js'),
    publicPath: "/js/",
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
         test: path.join(__dirname, 'src'),
         loader: ['babel-loader'],
         query: {
            cacheDirectory: 'babel_cache',
            presets: debug ? ['react', 'es2015', 'react-hmre'] : ['react', 'es2015']
         }
      },
      {
         test: /\.scss$/,
         loaders: [ 'style', 'css?sourceMap', 'sass?sourceMap' ]
         // loader: ExtractTextPlugin.extract(
         //     'style', // The backup style loader
         //     'css?sourceMap!sass?sourceMap'
         // )
      },
      {
         test: /\.png$/,
         loader: "url-loader?limit=10000&minetype=image/jpg"
      }
    ]
  },
  plugins: debug ? [] : [
   //  new ExtractTextPlugin('styles.css'),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    }),
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({
      compress: { warnings: false },
      mangle: true,
      sourcemap: false,
      beautify: false,
      dead_code: true
    }),
  ]
};

包.json

{
  "name": "***",
  "version": "1.0.0",
  "description": "***",
  "main": "src/server.js",
  "repository": "**REPO**",
  "scripts": {
    "start": "NODE_ENV=production node_modules/.bin/babel-node --presets 'react,es2015' src/server.js",
    "start-dev": "npm run start-dev-hmr",
    "start-dev-single-page": "node_modules/.bin/http-server src/static",
    "start-dev-hmr": "node_modules/.bin/webpack-dev-server --progress --inline --hot",
    "build": "NODE_ENV=production node_modules/.bin/webpack -p"
  },
  "author": "***",
  "license": "UNLICENSED",
  "dependencies": {
    "axios": "^0.15.3",
    "babel-cli": "^6.11.4",
    "babel-core": "^6.13.2",
    "babel-loader": "^6.2.5",
    "babel-plugin-react-html-attrs": "^2.0.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-object-rest-spread": "^6.22.0",
    "babel-preset-es2015": "^6.13.2",
    "babel-preset-react": "^6.11.1",
    "babel-preset-react-hmre": "^1.1.1",
    "babel-preset-stage-2": "^6.22.0",
    "ejs": "^2.5.1",
    "express": "^4.14.0",
    "react": "^15.3.1",
    "react-dom": "^15.3.1",
    "react-redux": "^5.0.2",
    "react-router": "^2.6.1",
    "redux": "^3.6.0",
    "redux-logger": "^2.7.4",
    "redux-thunk": "^2.2.0"
  },
  "devDependencies": {
    "css-loader": "^0.26.1",
    "file-loader": "^0.9.0",
    "http-server": "^0.9.0",
    "node-sass": "^4.3.0",
    "react-hot-loader": "^1.3.0",
    "sass-loader": "^4.1.1",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "^1.13.2",
    "webpack-dev-server": "^1.14.1"
  }
}
4

2 回答 2

2

我遇到了同样的问题。我发现您可以?url=false在您的 css-loader 中包含以禁用 url 处理。然后你可以在你的公共文件夹中放置一个图像供 css 访问。图像不会通过 webpack 运行，但它会让你摆脱 webpack 的编译错误，并且仍然允许访问图像。

所以这是我在 module.loaders 数组中的新对象：

{
    test: /\.s?css$/,
    use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: ['css-loader?url=false', 'sass-loader']
    })
}
于 2018-01-15T00:50:04.657 回答
0

好的，我在另一个堆栈溢出问题上找到了答案：Webpack - background images not loading

原来这是一个错误，由css-loader.

我改了这个...

{
   test: /\.scss$/,
   loaders: [ 'style', 'css?sourceMap', 'sass?sourceMap' ]
}

...对此：

{
   test: /\.scss$/,
   loaders: [ 'style', 'css', 'sass?sourceMap' ]
}

希望对面临这个问题的其他人有所帮助，因为它浪费了我几个小时！

于 2017-01-21T23:43:35.560 回答