代码之家 › 专栏 › 技术社区 › impulsgraw

如果通过ES6导入语法导入,则SCSS无法重写默认变量

sass webpack twitter-bootstrap javascript

impulsgraw · 技术社区 · 6 年前

试图重写项目中的sass默认变量(堆栈是关于sass+babel+webpack的,用vue cli生成),但没有重写任何内容。我使用引导程序,所以如果导入sass模块

// in main.js
import './app_overrides.scss'
import 'bootstrap/scss/bootstrap.scss'

哪里 ./应用程序覆盖.scss 包含:

$def_color: #aaaaaa;

和 引导程序/scss/bootstrap.scss (例如):

$def_color: #ffffff !default;

h1 {
  color: $def_color;
}

h1具有最终默认颜色 #ffffff 而不是被重写。但如果直接导入引导SCSS模块 ./app_overrides.scss 通过 @import 接线员,一切正常。最后一个对我来说是不合适的,因为在我的项目中有许多使用ES6导入语法导入的组件,所有这些组件都使用带有可能的引导变量重写的SCSS样式,所以我需要在 main.js .

可能有什么方法可以配置webpack/sass以正确的方式进行排序?

2 回复 | 直到 6 年前

DragonKnight 6 年前

由于所有的SCSS文件都捆绑在一个巨大的CSS文件中,因此导入文件时文件的顺序变得至关重要。

因此,您需要先加载库,然后定义变量、混合、动画等,最后定义自定义样式。

impulsgraw 6 年前

这是webpack+sass项目中众所周知的问题。为了解决这个问题,所有共享变量和重写都应该导出到单个文件中,例如 variables.scss 并手动添加到Webpack配置 like described over there :

// vue.config.js
const fs = require('fs')

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: fs.readFileSync('src/variables.scss', 'utf-8')  //your-path-here
      }
    }
  }
}

这将注入 变量.scss 到项目中每个sass文件的头,因此variables.scss中描述的变量将在所有scss文件之间真正共享。编译成本机CSS文件后,所有sass变量定义都将消失。

重要提示:不要将任何CSS描述添加到 变量.scss ,因为在规则编译之后,它们将被复制粘贴到输出中的样式表文件的数量。

推荐文章

xajetin · 导航不更改滚动上的颜色

2 年前

Noor ul ain Ibrahim · 如何在一行中制作两个大小相同的按钮?

2 年前

Bryan Santos · 固定表头与引导

2 年前

Nicolas Berthier · Bootstrap 5基于内容的包装

3 年前

tym · 根据用户偏好显示字段

3 年前

Sheryar Khan · 如何仅使用html、css、bootstrap、javascript/jquery创建html页面?

3 年前

Pavel · 当验证DIV可见时,引导网格会移动

6 年前

Sam · 在标题中嵌入Bootstrap 3导航栏

6 年前

Alexander David · 折叠卡打开,然后立即再次关闭

6 年前

Sandeep Bhardwaj · div的一致行为,与设备分辨率无关

6 年前