webpack 打包 sass 样式 用@import 引用 其他文件夹下的 样式 图片路径问题

Question

我使用webpack打包 sass文件,现在遇到的问题是 我的目录结构如下:

其中variable.scss中我引入了img中的图片 arrow-in.png

$color:red;
.arrow-in{
  display: inline-block;
  color: $color;
  width: 16px;
  height: 16px;
  background-image: url('./img/arrow-in.png');
}

现在我想在组件中 引入这个带有变量的 variable.scss

@import "../../theme/variable.scss";

.button{
  color: $color;
}

然后在 test.js这个主文件中引入 button这个组件

require("./component/button/button.js");

然后我的webpack主要配置文件如下

module.exports = {
    //入口文件
    entry: {
        cytest: "./cytestSrc/test.js"
    },
    //出口文件
    output: {
        //打包文档生成路径
        path: __dirname+'/cytestBuild/',
        filename: '[name].js'
    },
    module: {
        loaders: [
           ...
            {
                test: /.scss$/,
                loader: ExtractTextPlugin.extract('style', 'css!resolve-url!sass?sourceMap')
            },
            //图片加载小于10K的以码流方式插入到js||css中
            {test: /.(jpg|png|gif)$/, loader: "url?limit=10000&name=img/[hash:8].[name].[ext]"} 
            ...      
        ]
    },

  ...


}

现在出现的问题是 使用@import 引用的variable.scss中的路径是直接被copy过来的 ,他会在 button下面找arrow-in.png这个文件,当然我也使用了绝对路径@import "/cytestSrc/theme/variable.scss";以及resolve-url,都没有解决这个路径问题,所以想问下,有什么方法解决这个路径问题,或者是有什么loader可以解决这个问题.

Answer 1

我一般习惯的做法是单独定义一个变量

    .bg-url(url) {
        background: url(url) no-repeat;
    }

然后哪里需要background的时候，调用这个就好了。这样路径就不会出现你描述的那种比较混乱的情况了。