uniapp中全局引入的scss样式，会在每个使用的文件中都添加重复的代码，导致打包出来文件很大

Question

uniapp中全局引入的scss样式，编译后会在每个使用的文件中都添加重复的代码，导致打包出来文件很大，打包速度很慢，该如何解决

Answer 1

引自强大而免费的微信小程序：皆我百晓生。

问题描述：

在uni-app中全局引入的scss样式，编译后会在每个使用的文件中都添加重复的代码，导致打包出来文件很大，打包速度很慢。

解决方法：

1. 使用style-resources-loader插件

• 安装style-resources-loader插件

npm install style-resources-loader --save-dev

• 在vue.config.js中配置styleResources属性

module.exports = {
    chainWebpack: config => {
        config.plugin('style-resources')
            .use(require('style-resources-loader'))
            .options({
                patterns: [
                    // 添加全局引入的scss样式文件路径
                    path.resolve(__dirname, './src/styles/variables.scss')
                ]
            })
    }
}

这样配置后，scss样式只会编译一次，然后在每个文件中只会添加一个全局样式，减少了代码的冗余。

2. 使用vue-cli-plugin-style-resources-loader插件

• 安装vue-cli-plugin-style-resources-loader插件

npm install vue-cli-plugin-style-resources-loader --save-dev

• 在vue.config.js中配置pluginOptions属性

module.exports = {
    pluginOptions: {
        'style-resources-loader': {
            preProcessor: 'scss',
            patterns: [
                // 添加全局引入的scss样式文件路径
                path.resolve(__dirname, './src/styles/variables.scss')
            ]
        }
    }
}

这样配置后，scss样式只会编译一次，然后在每个文件中只会添加一个全局样式，减少了代码的冗余。

3. 使用Vue CLI的@import语法

• 在每个使用的scss文件中使用@import语法引入全局scss样式文件

@import '@/styles/variables.scss';

// 其他样式代码

这样配置后，scss样式只会编译一次，然后通过@import语法在每个文件中引入全局样式，减少了代码的冗余。

4. 使用postcss-import插件

• 在postcss.config.js中配置postcss-import插件

module.exports = {
    plugins: {
        'postcss-import': {
            path: ['./src/styles']
        }
    }
}

这样配置后，postcss-import插件会将被引入的scss样式文件合并，并在每个文件中只添加一次全局样式，减少了代码的冗余。

参考链接：

1. vue-cli-plugin-style-resources-loader官方文档
2. postcss-import官方文档