vue.config.js配置sass-loader

vue.config.js中配置sass的全局变量入口遇到问题

“sass-loader”: “^8.0.0”

sass-loader如上版本号时,配置如下:

module.exports = {
    css: {
        loaderOptions: {
            sass: {
                // 全局sass变量	
                //sass-loader 8.0.0以前版本(包含)
                prependData: `@import "~@/assets/scss/index.scss";`
            }
        }
    },
}

“sass-loader”: “^10.1.1”,

sass-loader如上版本号时,配置如下:

module.exports = {
    css: {
        loaderOptions: {
            sass: {
                // 全局sass变量	
                //sass-loader 新版本
                additionalData: `@import "~@/assets/scss/index.scss";`
            }
        }
    },
}

Webpack-px2rem-plus-loader是一个用于将CSS中的像素值转换为相对单位(如 rem)的loader,适用于Vue项目中需要响应式设计的情况,它可以帮助你实现设计稿到代码的快速迁移。 要在Vue CLI的`vue.config.js`文件中添加`webpack-px2rem-plus-loader`的配置,首先你需要安装这个插件和相关的依赖: ```bash npm install --save-dev px2rem-loader css-loader style-resources-loader vue-style-loader ``` 然后,在`vue.config.js`文件中,找到并修改`configureWebpack`函数,通常是在`chainWebpack`方法里。添加新的规则配置如下: ```javascript module.exports = { configureWebpack: (config) => { config.module.rules.push({ test: /\.css$/i, use: [ 'style-loader', 'css-loader', // 加载 CSS { loader: 'px2rem-loader', options: { remUnit: 100 } }, // 转换像素为 rem ], include: /src/, // 只处理 src 目录下的 CSS 文件,可根据需要调整 }); if (!config.resolveLoader.hasPlugin('style-resources-loader')) { config.resolveLoader.rules.unshift({ test: /\.(scss|sass|less)$/, use: ['style-resources-loader', { resources: './path/to/your/global-styles.scss' }], }); } }, }; ``` 在这个配置中,我们告诉Webpack先运行`style-loader`,然后是`css-loader`和`px2rem-loader`,最后处理`.css`、`.scss`、`.sass`或`.less`等样式文件。`px2rem-loader`选项里的`remUnit`参数决定了1rem代表的实际像素值。 别忘了替换`./path/to/your/global-styles.scss`为你实际存放全局样式的地方。
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值