其实开发一个项目最需要的就是操作文档,文档的质量决定了项目的开发流程,开发规范等等. 对于前端框架来说,文档最友好的还是vue,不仅是中国人的框架,而且文档支持了中文.仔细查看 Vue 的官方文档,还有Vue-Router,Vuex,Vite.发现尤大的文档都是一个模板刻出来的,而且也非常简洁好用. 原来是使用了VitePress这个框架生成的文档,让我们快速熟练使用这个框架. 于是我也自己写了一个react-ant-admin的文档,使用 VitePress 开发非常快,于是我完成了doc-r

Sass作为目前成熟,稳定,强大的css扩展语言,让越来越多的前端工程师喜欢上它.下面介绍了如何在vue项目 中引入Sass. 首先在项目文件夹执行命令 npm install vue-cli -g,安装vue-cli脚手架,若是已经安装了,则不必再次安装,直接 跳过这一步.接下来执行命令行vue init webpack mypro(注:mypro是项目名). 接下来安装Sass依赖包,使用以下命令行: npm install sass-loader --save-dev npm instal

antd 用 customize-cra 方式引入 sass 只需要安装:node-sass 即可

最近两天手头的事情暂时搞完了,可以抽出空来学习一下东西,之前项目都是鹏哥搭建好了,我们在直接在里面写代码,sass语法用来写样式还是比较方便常用的,今天就来试试怎么引入和配置sass 参考文章:Vue项目使用sass (1)首先是先用vue-cli构建一个新的vue项目 ① 安装node ② node安装好后安装脚手架:npm install -g vue-cli ③ 构建vue项目:vue init webpack vue_exercise ④ 进入项目根目录,把项目运行起来:npm run

1.添加依赖 npm install sass-resources-loader --save-dev 2.修改build/utils.js scss: generateLoaders('sass').concat( { loader: 'sass-resources-loader', options: { resources: path.resolve(__dirname, '../src/assets/your.scss') } } )

1.进入项目目录 2.安装sass的依赖 npm install --save-dev sass-loader npm install --save-dev node-sass 3.在build文件夹下的webpack.base.conf.js的rules里面添加配置(和其它配置项形式一样即可) {  test: /\.sass$/,  loaders: ['style', 'css', 'sass'] } 4.在使用sass的vue文件的 <style lang="scss"&

angular/cli支持使用sass新建工程:如果是新建一个angular工程采用sass:ng new My_New_Project --style=sass这样所有样式的地方都将采用sass样式,如果需要使用sass的scss语法,还可以如下方式:ng new My_New_Project --style=scss然后需要手动安装node-sass:npm install node-sass --save-dev这样就可以实现用sass语法做样式了. 已有angular-cli工程改为sa

在引入样式之前,首先要了解static.assets两个文件夹的区别. 从字面上可以看出,static用来存放静态文件,assets用来存放资源文件: static存放的文件不会被编译,打包后直接赋值到项目中:assets文件会被webpack编译: 举个简单的栗子:static的图片资源会完全一样的被复制到打包文件中,而assets里面的图片资源会打上时间戳: 当然这里还有很多细节的地方,我就暂时不多说了: 本栗子中,我将same.css文件放在static下:而将common.scss文件放

背景:   初次接手公司的项目,虽然之前草草的看过一些sass的基础知识,但是因为久未征战,知识也早已随风飘散,现在小复习一下记下一些常识中的重点..sass是使用ruby写的,所以使用前请先确保自己的机子中有了ruby的开发环境,在cmd下使用 ruby -v 命令可以查看当前的ruby版本,安装Ruby后我们要安装sass,按住键盘win+R,输入ruby打开命令行,输入gem install sass安装sass即可,如图所示: 需要注意的是:只要我们的项目中用到了sass都应该将环境配置

1.sass的安装:(1)下载安装Ruby,记得安装的时候勾选第二项,(2)打开控制面板gem install sass(人品好的话,一下子就能安装成功)(3)如果(2)安装不成功进行一下步骤:gem sources -remove htpps://rubygems.org/ gem sources -a http://gems.ruby-china.org gem sources -l gem install sass 2.sass的编译(1)下载安装koala(2)打开koala把需要编译的

sass安装 官网下载ruby的windows安装包,安装时勾选上添加到环境变量add ruby executables to your path.安装完成后打开命令行,ruby -v输出内容则安装完成. 添加国内sources,安装sass gem sources --remove https://rubygems.org/ gem sources -a http://gems.ruby-china.org 国内的镜像 gem sources -l 查看current sources gem

这一篇主要详述保持sass条理性和可读性的3个最基本方法--嵌套.导入和注释. 零. 变量 变量本身的作用是为了保持属性值的可维护性,把所有需要维护的属性值放在同一个地方,快速更改,处处生效,可谓售后无忧. 1.变量声明 变量用"$"符号开头进行声明,任何可以用作CSS属性值的东西都可以用作sass变量的值,单个值.空格分开的多个值.逗号分开的多个值都可以: $primary-color: #233; $general-border: 1px solid #ddd; 变量一般声明在sa

https://select2.github.io/examples.html   select2 自动搜索带select选择 ## 表单提交 https://github.com/marioizquierdo/jquery.serializeJSON   可以在标签上直接写就可达到后端想要的数据 ##   javascript工具库   https://lodash.com/ http://lodashjs.com/docs/#_templatestring-options ## 时间处理工具

一.导语 最近的战狼2好火爆啊,每天看战狼2的票房一路高飙,我估计比吴京还开心.看了这部戏的拍摄过程,除了敬佩就是踏实,是的,吴京是电影圈隔了这么久后能踏踏实实做电影的了,纯属个人见解,不喜请忽略..................... 说道踏实,好吧,我要把基础给踩踩了,说说最简单的sass是怎么在html中运行的 二.正文(文中编辑器使用webstorm) 1.创建项目untitlecl(如此随意,我连默认名都懒得改了,,,,,,,),再创建H5格式的html   textsass.htm

一.本文将分享如何快速搭起基于webpack+vue的前端项目框架,利用vue的自己的脚手架工具vue-cli搭建起基本的环境配置,再通过npm包管理工具引入相应的依赖来完善项目的各种依赖框架.下面是具体实操. 二.基本命令操作. 1.在开发之前需要首先安装node.js,直接百度搜索或者在其中文官网也可以下载http://nodejs.cn/download/, 在装完node之后npm包管理工具也自动的安装好,安装完之后,在命令行输入node -v或者npm -v,出现版本号说明安装成功.如

本帖将对一下内容进行分享: 1.webpack环境搭建: 2.如何使用react-router: 3.引入sass预编译: 4.react 性能优化方案: 5.redux结合react使用: 6.fetch使用: 7.项目目录结构: 一.webpack配置,代码如下: 1.在根目录下新建一个webpack.config.js,这个为开发环境的webpack配置:因为得区分开发跟生产环境,所以还得新建一个webpack.production.config.js作为生产环境使用的配置文档, webp

接到领导指示,用户嫌我做的页面字体太小,15px的字体叫小?领导说用户多是上了年纪的人.没办法,改吧,谁让咱是个搬砖的呢..咳咳 我寻思着这次改大了,下次用户嫌大再让改小呢?干脆给他做个选择字号的功能,让他自己选.我真是个机智的人啊,哈哈哈! 可是,问题来了,怎么才能动态改变页面字体大小呢?我陷入了沉(搜)思(索). 首先,建两个sass文件.如图: variable.scss文件代码如下: // 存放变量$font_size_14:14px; $font_size_15:15px; $font

使用webpack引入sass/less全局变量 sass或者less都提供变量设置,在需求切换主题的项目中使用less或者sass变量,只要修改变量值,编译后所有用到该变量的样式都会被修改为你想要的效果,但是在vue-cli搭建的项目中,在main.js中全局引入一个scss文件,在其中定义变量在其他组件或者页面中引用报变量未定义错误,其他的样式可以正常显示,显然是编译的问题. 傻瓜式引用 在每个用到全局变量的组件都引入该全局样式文件 @import 'path/fileName.scss'

项目架构 开始 vue init webpack    项目名称         //新建项目,cd进入新项目 npm install axios                    //先安装! npm install --save axios vue-axios   //然后! npm install vuex --save              //安装vuex npm i vant -S                        //安装vant,Ui框架,选择性安装 npm

如何在ng2的模块或者组件中引入sass文件? 很简单,两个步骤 1.安装style-loader css加载器 npm install --save-dev style-loader 2.在ts文件中引入 import 'style-loader!../../node_modules/ladda/css/ladda.scss';   或在组件中还可以的这样引入 @Component({ providers: [RegisterService, MdIconModule], templateUr

在Mac系统下,Ruby一般已内置在其中,如果您不能确认是否已安装,或者说你不知道你的Ruby使用的版本,你可以打开你的命令工具: $ ruby -v 安装sass 在大多数情况和大部分人群中,还是喜欢安装SASS的标准稳定版本,这样使用在项目中风险不会太大,其安装很简单: $ gem install sass 有的时候在Linux和OS X系统下,可能需要超级管理员权限才能安装: $ sudo gem install sass 安装完成后,可以通过下面的命令查看SASS是否安装成功: $ ge