scss

项目中虽然没有一键换肤的要求，但是产品要求后期能换主题。在开发组件中涉及到主题的地方，要提取一些公用的变量，不要直接写死样式值。但是如果只是定义一些变量的话，只是完成控制颜色等值的提取。后期切换的话需要把所有变量再写一遍并注释之前的。不是很优雅。 一、Scss部分 定义变量以及映射表 // 默认主题 $default-theme : ( base-color: #ddd, border-color: #000 ); //红色主题 $red-theme : ( base-color: red, border-color: red ); //定义映射集合 $themes: ( default-theme: $default-theme, red-theme: $red-theme ); 定义方法,循环遍历映射集合，生成对应样式表 @mixin base-background(){ @each $themename , $theme in $themes { [data-theme = '#{$themename}'] & { background: map-get($map: $theme, $key: base-color ) } } } 在组件中,引入公共文件，在要用到的地方使用定义好的mixin @import 'theme.scss' .block { width:

给自己做个备份，看着视频学vue，结果新版没有webpack.config.js，找了好久 步骤一： 安装依赖包 1 npm install node-sass --save-dev 2 npm install sass-loader --save-dev 3 npm install style-loader --save-dev 4 npm install sass-resources-loader --save-dev 前三个可以一起导入 npm install node-sass sass-loader style-loader --save-dev 步骤二：打开 Build --> utils.js 找到下图中的 scss: generateLoaders('sass') 改成如下代码，并在main.js中import scss: generateLoaders('sass').concat({ loader: 'sass-resources-loader', options: { resources: path.resolve(__dirname, '你的路径') } }), 来源： https://www.cnblogs.com/kusaki/p/11332832.html

某次小组内开周会，提到开发效率的问题，有个小伙伴提到写新页面的时候， template 大概布局写完后，对着 template 结构写 scss 是件比较耗时耗力的事情，如果能作出一个自动依据 template 结构生成 scss 文件的 vscode 插件就好了 我当时也没在意，后来周会结束后觉得这事情可以做一下，于是抽空看了下 vscode 扩展的 开发文档 ，就上手 code 了，做出来后效果还不错，最起码不用再做人工对着 template 写 scss 这种没技术含量的事情了，写好了一大堆 template 之后，一键转换，还是挺爽的 插件已经发布到 vscode 扩展市场，可以在 vscode 插件市场 查找安装，或者 vscode 上直接搜索 AutoScssStruct4Vue 安装 插件的源码已经上传到 Github ，需要的可自取，如果有问题，直接提 issue 即可 模板解析 scss 文件的关键就是选择器，能在模板上体现出来的选择器属性有 class 、 id 和标签名，所以必须要从模板中取得所有的选择器 模板的处理实际上就是字符串的处理，通过正则表达式从 <template>...</template> 中提取所需的选择器名，既然是 vue ，我第一个就想到直接从 vue 源码中将 vue 处理 template 的部分抄过来，不过后来看了一下源码，想法可行

问大家一个问题：Laravel5.8如何引入 Bootstrap？ laravle5.8开发过程中，使用 Bootstrap 来作为应用的前端框架。 Laravel 并不强制你使用 CSS 框架，但是laravel提供了对 Bootstrap 的支持，在 resources/js/bootstrap.js （在 Laravel 5.7 之前的版本位于 resources/assets/js/bootstrap.js ）中！ Bootstrap 是以 NPM 扩展包的形式集成到 Laravel 项目中的，NPM 是 Node.js（一个基于 Google V8 引擎的 JavaScript 运行环境）的包管理和分发工具。 运行 npm install 安装 Bootstrap 库 上述 package.json 可类比为前端的 composer.json ，我们通过 npm install 安装该文件中定义的依赖，就好比运行 composer install 安装 composer.json 中定义的依赖，只不过一个是安装的是 JavaScript 库，一个是安装的是 PHP 库。 由于新版的nodejs已经集成了npm，所以之前npm也一并安装好了。同样可以通过输入 "npm -v" 来测试是否成功安装。命令如下，出现版本提示表示安装成功 你还没有在项目根目录下运行过 npm