vue.config.js配置sass-loader

41 篇文章 0 订阅
2 篇文章 0 订阅

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";`
            }
        }
    },
}

  • 4
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
Vue 2 中,你可以通过创建一个名为 `vue.config.js` 的文件来配置项目的构建和开发行为。这个文件需要放置在你的项目根目录下。 以下是一些常见的配置选项和用法示例: #### publicPath 设置应用程序在服务器上的基本 URL。默认情况下,Vue CLI 会假设你的应用程序部署在域的根目录。 ```javascript module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '/my-app/' : '/' } ``` #### outputDir 指定构建输出的目录,默认为 `dist`。 ```javascript module.exports = { outputDir: 'my-dist' } ``` #### devServer 配置开发服务器。 ```javascript module.exports = { devServer: { port: 8080, proxy: { '/api': { target: 'http://localhost:3000', pathRewrite: { '^/api': '' } } } } } ``` #### css 在 Vue CLI 2 中,你可以使用 `css` 配置来自定义 CSS 相关的配置。例如: ```javascript module.exports = { css: { loaderOptions: { sass: { additionalData: `@import "@/styles/variables.scss";` } } } } ``` #### chainWebpack 使用 `chainWebpack` 配置项可以对内部的 webpack 配置进行更细粒度的修改。 ```javascript module.exports = { chainWebpack: config => { config.module .rule('svg') .exclude.add(resolve('src/assets/icons')) .end() config.module .rule('icons') .test(/\.svg$/) .include.add(resolve('src/assets/icons')) .end() .use('svg-sprite-loader') .loader('svg-sprite-loader') .options({ symbolId: 'icon-[name]' }) .end() } } ``` 这只是一些常见的配置选项示例,你可以根据你的项目需求进行更多的配置。更多详细的配置选项和用法可以参考 Vue CLI 的官方文档。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值