首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >如何加载webpack中sass样式表中使用的图像?

如何加载webpack中sass样式表中使用的图像?
EN

Stack Overflow用户
提问于 2016-02-10 20:30:01
回答 3查看 32.2K关注 0票数 12

我使用Webpack捆绑我的模块,并在一个基于反应的应用程序中使用sass进行造型设计。

使用单独的样式表,我将设置组件的背景图像,并在index.js中加载该样式表。除了背景图像之外,样式表中的所有样式都应用于该组件

这是我的样本样式表

代码语言:javascript
复制
$bg-img: url('/img/bg.jpg');

.show {
    position: relative;
    background: $black $bg-img center center;
    width: 100%;
    height: 100%;
    background-size: cover;
    overflow: hidden;
}

解决该问题的一种方法是显式地要求映像,然后为react组件创建内联样式。

代码语言:javascript
复制
img1 = document.createElement("img");
img1.src = require("./image.png");

但是,我希望在样式表加载时,立即从我的图像文件夹加载所有图像,而不是分别要求每个图像。

我的webpack配置文件是

代码语言:javascript
复制
module.exports = {
  devtool: 'source-map',
  entry: {
    main: [
      'webpack-dev-server/client?http://localhost:8080',
      'webpack/hot/only-dev-server',
      './src/index.js'
    ]
  },
  output: {
    path: path.join(__dirname, 'public'),
    publicPath: '/public/',
    filename: 'bundle.js'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ],
  module: {
   loaders: [
      {
        test: /\.jsx?$/,
        include: path.join(__dirname, 'src'),
        loader: 'react-hot!babel'
      },
      {
        test: /\.scss$/,
        include: path.join(__dirname, 'sass'),
        loaders: ["style", "css?sourceMap", "sass?sourceMap"]
      },
      { 
        test: /\.(png|jpg)$/,
        include: path.join(__dirname, 'img'),
        loader: 'url-loader?limit=10000' 
     } // inline base64 URLs for <=10k images, direct URLs for the rest
    ]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  devServer: {
    historyApiFallback: true,
    contentBase: './'
  }
};

我可能遗漏了一些琐碎的要点。任何帮助都是非常感谢的。

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2016-02-10 22:43:59

啊..。经过长时间的调试,我终于发现了这个问题。正是因为我的愚蠢,我才努力奋斗。我想删除这个问题,但我认为,如果遇到类似的问题,它会帮助像我这样的新来者。

问题就在这里

loader: 'url-loader?limit=10000'

我在设置10 of 的文件大小限制时,并没有真正知道它做了什么。而我正在加载的图像是大小为21 of的!当您复制其他webpack配置文件时会发生这种情况:) javascript疲劳的符号!

票数 23
EN

Stack Overflow用户

发布于 2016-02-10 21:27:36

当使用webpack加载css及其访问的资产时,css需要遵循与在JavaScript importrequire调用中使用的相同的模块命名规则。

假设img文件夹位于源树的根中,您应该在scss中这样引用它:

代码语言:javascript
复制
// note there is no leading /, which tells "require()" to start from the root of your source tree
$bg-img: url('img/bg.jpg');

或者完全是相对的。假设您的源代码如下所示:

代码语言:javascript
复制
/src/styles.scss
/img/bg.jpg

您的styles.scss可以使用相对路径:

代码语言:javascript
复制
// note the path is relative to where the style.scss is in your source tree.
$bg-img: url('../img/bg.jpg');
票数 5
EN

Stack Overflow用户

发布于 2017-08-17 09:22:45

我也有类似的问题,但图片的'.jpeg‘扩展。由于某些原因,将扩展部分更改为“.jpg”帮助了我。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/35325291

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档