[JavaScript知识库]sass踩坑日记

sass文件作用于全局

配置webpack

loader: config => {
        const oneOfsMap = config.module.rule('scss').oneOfs.store
        oneOfsMap.forEach(item => {
            item
                .use('sass-resources-loader')
                .loader('sass-resources-loader')
                .options({
                // Provide path to the file with resources
                resources: './src/assets/scss/global.variable.module.scss' //需要作用域全局的scss文件
                })
                .end()
            })
  }

媒体查询中改变sass变量

$multiple:1;
@media screen and (min-width: 1920px) {
  $multiple:2;
  //	$multiple:2!global; 虽然可以作用全局，但是无法区别媒体查询
};

这样执行是无法实现的
修改成

:root{
  --size: 1;
}
@media screen and (min-width: 1920px) {
  :root{
    --size: 1.5;
  }
};
$multiple: var(--size);

注意 这种使用方法用的使用需要calc($multiple * 5px).需要加calc去运算，并且变量需要放在前面

sass变量在vue实例中使用

通过:export将变量抛出
注意，文件名.scss前需要使用module。
例如：文件名为 global.variable.module.scss

:root{
  --size: 1;
}
@media screen and (min-width: 1920px) {
  :root{
    --size: 1.5;
  }
};
$multiple: var(--size);
:export {
  multiple: var(--size);
  // multiple: $multiple;
}

vue中使用

import variable from "@/assets/scss/global.variable.module.scss";

variable.multiple获取

这中export方法只能拿到字符串var(--size)

应该使用

let root = document.querySelector(":root");
let multiple = getComputedStyle(root).getPropertyValue("--size");

阅读世界，共赴山海

423全民读书节，邀你共读