相对路径在sass文件中不起作用

时间:2017-07-02 17:38:21

标签: css3 reactjs webpack sass

我是新手做出反应。我添加了一个sass文件并添加了一个相对url.After运行后给我以下错误。

  

错误:找不到模块   “../资产/图像/ 2012_06_14_EatingRightforBloodDonation_0.jpg”

文件结构如下:

-----Login
   |--assets
      |--images
           |---2012_06_14_EatingRightforBloodDonation_0.jpg   
   |--login.scss



.bg {
/* The image used */
background-image: url("../assets/images/2012_06_14_EatingRightforBloodDonation_0.jpg" );

/* Full height */
height: 100%; 

/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;

}

我的webpack配置是

    const extractStyles = new ExtractTextPlugin({
  filename: 'styles/[name].[contenthash].css',
  allChunks: true,
  disable: __DEV__,
})

config.module.rules.push({
  test: /\.(sass|scss)$/,
  loader: extractStyles.extract({
    fallback: 'style-loader',
    use: [
      {
        loader: 'css-loader',
        options: {
          sourceMap: project.sourcemaps,
          minimize: {
            autoprefixer: {
              add: true,
              remove: true,
              browsers: ['last 2 versions'],
            },
            discardComments: {
              removeAll : true,
            },
            discardUnused: false,
            mergeIdents: false,
            reduceIdents: false,
            safe: true,
            sourcemap: project.sourcemaps,
          },
        },
      },
      {
        loader: 'sass-loader',
        options: {
          sourceMap: project.sourcemaps,
          includePaths: [
            inProjectSrc('styles'),
          ],
        },
      },
      {
        loader:'resolve-url-loader'
      }
    ],
  })
})
config.plugins.push(extractStyles)

// Images
// ------------------------------------
config.module.rules.push({
  test    : /\.(png|jpg|gif)$/,
  loader  : 'url-loader',
  options : {
    limit : 8192,
  },
})

0 个答案:

没有答案