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"
}
}