例如 @import url("~./foobar");
在这里看到它,不确定它是否是某些包特定的东西或它是否是真正的CSS语法.
使用vue cli.
出于某种原因,我的一些图像,如果我直接在scss中引用它们并且不将它们动态地绑定到我的vue对象,则会出现相对路径问题.
假设我有一个带有div的vue模板.Box有一个背景网址:
.box {background:url('../ img/box.jpg')
当我运行npm run dev时,本地工作就好了.但是当我运行构建时,它不起作用.404错误.我也试过这样做:
.box{
background: url('~../img/box.jpg')
那没用.
所以这就是:
webpack css-loader无法在外部样式表中的url()引用中查找图像
当我在webpack.config中更改它时:
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
至:
output: {
path: path.resolve(__dirname, './dist'),
publicPath: './dist/',
filename: 'build.js'
},
它将在我的webpack构建中创建Chunk Images,其中包含用于缓存的哈希.并且仅适用于未在vue对象中绑定的特定图像.
然后我必须将这些图像拖到root dist文件夹....而不是我想要做的是将它们保存在相对于html文件的img文件夹中(简单的html文件):
<html lang="en">
<head>
<meta charset="utf-8">
<title>vue</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<app></app>
<script src="dist/build.js"></script>
</body>
</html>
问题是,我是否必须从数据中绑定每个vue img ...或者如果我知道它不会被更改,我就不能直接引用图像.
或者我的sass loader/webpack中有一些我不知道的设置.
这是我的webpack配置:
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: './src/main.js',
output: {
path: …