Webpack 重复导入css，＜style＞引入了两次问题，sass全局变量配置

现象

全局样式被引入了两次，点击<style>...</style>指向的是同一位置。

分析

vue项目使用scss等预处理语言时，当使用$var全局变量时，需要指定一个公共的文件例如globalVariable.scss来存放所有公共变量，例如颜色，边距，全局混入等。

在.vue中使用，需要在scss-loader前增加sass-resources-loader来载入公共全局变量。

这样在.vue单文件中<style lang='scss'></style>标签中就可以直接使用$var来使用globalVariable.scss全局定义的变量了。

webpack配置如下

// webpack.config.js
module:{
    rules: [
        test: /\.scss$/,
        use: [
            'vue-style-loader',
            'css-loader',
            'sass-loader',
            {
                loader: 'sass-resources-loader',
                options: {
                    resources: path.resolve(__dirname, './globalVariable.scss') // 全局scss变量
                }
            } 
        ]
    ]
}

如上配置，如果在globalVariable.scss全局变量文件中定义了全局样式。然后在入口文件中也import这个全局变量文件的话，就会造成多次引入。

我的项目在sass-resources-loader中指定了全局样式index.scss，这个文件import ’globalVariable.scss‘全局变量。

webpack入口js中import ‘index.scss’;全局样式文件

sass-resources-loader中又指定了index.scss全局样式文件，造成两次引入。

解决

现在通过修改sass-resource-loader中指定为globalVariable.scss全局变量文件解决。