我在我的PHP和React项目中使用webpack。我想用webpack文件加载器从我的.scss文件加载背景图像但由于某些原因我不知道，cursor - 文件夹没有被复制/导出到我的img - 夹。下面是webpack.config.js：
dist我也试过var webpack = require("webpack");
var path = require("path");
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var WatchLiveReloadPlugin = require('webpack-watch-livereload-plugin');
var DIST_DIR = path.resolve(__dirname, "dist");
var SRC_DIR = path.resolve(__dirname, "src");
var extractPlugin = new ExtractTextPlugin({
filename: 'main.css'
});
module.exports = {
entry: ['babel-polyfill', SRC_DIR + "/app/index.js"],
output: {
path: DIST_DIR + "/app",
filename: "bundle.js",
publicPath: "/dist"
},
watch: true,
module: {
rules: [
{
test: /\.js$/,
include: SRC_DIR,
loader: "babel-loader",
exclude: /node_modules/,
query: {
presets: ["react", "es2015", "stage-2"], plugins: ["transform-decorators-legacy", "transform-class-properties"]
}
},
{
test: /\.scss$/,
use: extractPlugin.extract({
fallback: "style-loader",
use: ["css-loader", "sass-loader", "resolve-url-loader"]
})
},
{
test: /\.css$/,
use: ["css-loader", "sass-loader", "resolve-url-loader"]
},
{
test: /\.(jpg|png)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'img/',
publicPath: 'img/'
}
}
]
}
]
},
plugins: [
extractPlugin,
new WatchLiveReloadPlugin({
port: 'localhost',
files: [
'./dist/app/*.css',
'./dist/**/*.js',
'./src/app/**/*.png',
'./src/app/**/*.jpg',
'./src/app/**/.*.scss',
'./src/**/*.php',
'./src//*.js'
]
})
]
};
，但没有运气。
我的文件结构是这样的：
loader: 'file-loader?name=/dist/img/[name].[ext]',然后在我的-- dist
-- app
bundle.js
main.css
-- src
-- app
-- css
main.scss
-- img
someimage.jpg
我尝试了这个：
.scss有没有人知道这里有什么问题？
答案 0 :(得分：1)
尝试在您的一个脚本文件中导入图像文件，例如
import '/path/to/img.jpg';
这将让Webpack知道依赖关系并复制它。
答案 1 :(得分：0)
CSS / Sass加载程序不会翻译以/开头的网址，因此您的file-loader将不会在此处应用。
如果您希望webpack处理它们，解决方案是使用导入的相对路径。请注意，CSS和Sass没有相关导入的特殊语法，因此以下内容是等效的：
url('img/someimage.jpg')
url('./img/someimage.jpg')
如果您希望像模块一样解析它们，webpack可以使用~启动导入路径，如sass-loader - imports所示。