介绍 @import & # 39;路径/fileName.scss& # 39; npm install ——save-dev sass-resources-loader //,全局文件引入,当然只想编译一个文件的话可以省去这个函数
function resolveResource(名字),{
,return path.resolve (__dirname, & # 39;静态/风格/. ./& # 39;,+,名称);
}
function generateSassResourceLoader (), {
,var loaders =, (
cssLoader才能,
& # 39;才能sass-loader& # 39;
{才能
,,,装载机:& # 39;sass-resources-loader& # 39;
,,,选择:{
,,,//,多个文件时用数组的形式传入,单个文件时可以直接使用,path.resolve (__dirname, & # 39;静态/风格/. ./common.scss& # 39;
,,,资源:,(resolveResource (& # 39; common.scss& # 39;)),
,,}
,,}
)才能;
if 才能;(options.extract), {
,,return ExtractTextPlugin.extract ({
,,,使用:,装载机,
,,,回退:,& # 39;vue-style-loader& # 39;
,,})
,,},{else
,,return [& # 39; vue-style-loader& # 39;] .concat(加载器)
,,}
以前,} return {
css才能:generateLoaders (),
,,postcss: generateLoaders (),
,,少:generateLoaders(& # 39;少# 39;),//才能,vue-cli默认sass配置//才能,sass:, generateLoaders (& # 39; sass # 39;,, {, indentedSyntax: true }),,//才能,scss:, generateLoaders (& # 39; sass # 39;),//才能,新引入的sass-resources-loader
sass才能:generateSassResourceLoader (),
scss才能:generateSassResourceLoader (),
笔才能:generateLoaders(& # 39;针# 39;),
styl才能:generateLoaders(& # 39;针# 39;)
以前,}
小编给大家分享一下vue引入sass全局变量的方法,希望大家阅读完这篇文章之后都有所收获、下面让我们一起去探讨吧!
sass或者少都提供变量设置,在需求切换主题的项目中使用少或者sass变量,只要修改变量值,编译后所有用到该变量的样式都会被修改为你想要的效果,但是在vue-cli搭建的项目中,在主要。js中全局引入一个scss文件,在其中定义变量在其他组件或者页面中引用报变量未定义错误,其他的样式可以正常显示,显然是编译的问题。
<强>傻瓜式引用
在每个用到全局变量的组件都引入该全局样式文件
但是组件或者页面不在统一层目录下,引入的路径可能也会有差异,所以还是看看<代码> sass-resources-loader>
<强> sass-resources-loader引入sass全局变量
sass-resources-loader可以访问sass资源任何一个需要访问的sass模块,所以,可以使用共享变量和混合所有sass样式,而不去每个文件都引用。
安装sass-resources-loader
<强>修改sass配置
在<代码>构建代码> 跑龙套。js代码修改sass编译器加载器的配置
修改sass配置的调用为<代码> generateSassResourceLoader()
在<代码>主要。js代码中引用<代码>常见。scss>
看完了这篇文章,相信你对“vue引入sass全局变量的方法”有了一定的了解,如果想了解更多相关知识,欢迎关注行业资讯频道,感谢各位的阅读!
