标签：scss cli4 vue sass 使用 相关

本记录仅针对于 vue-cli4.x 使用 scss 全局变量设置使用

在网上也找了很多版本的方法，尝试后都不可行。由于我使用的是 vue-cli4.x 脚手架搭建的项目，在网上也找到一个解决方案，特此记录。

确定依赖包

先在 package.json 文件中确定是否集成了 sass 相关的包 node-sass 和 sass-loader. 若没集成，需要先进行相关安装。

npm install node-sass

npm install sass-loader

广州vi设计http://www.maiqicn.com 办公资源网站大全https://www.wode007.com

相关配置

在安装完相关依赖后，需要在 vue.config.js 中进行相关配置，重点配置路径。 路径后面的 ;是必须的

module.exports = {
    css: {
        loaderOptions: {
            sass: {
                prependData: `@import "./src/assets/styles/base";`,
            },
        },
    },
}

使用

在需要使用全局样式的地方，就可以进行使用 base.scss 文件中定义的样式。但是得注意在 加 lang="scss"

logo.vue 文件中使用。

<style lang="scss" scoped>
.logo {
    float: left;
    height: $header-height;
}
</style>

标签：scss,cli4,vue,sass,使用,相关
来源： https://www.cnblogs.com/cmqj/p/13704588.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。