在vue中使用scss或less

一：在vue中使用

01.npm install sass-loader node-sass --save-dev

02.<style scoped lang="scss"></style>

03.可以使用啦...

二：平时使用

0.1安装ruby

https://rubyinstaller.org/downloads/

安装步骤：https://www.sass.hk/install/

注：添加国内淘宝源使用

gem

sources -ahttps://gems.ruby-china.com/

0.2Hbuilder中配置

1.工具栏中依次选择：工具---预编译器设置

2.如果设置中有sass,scss选项，则点击编辑；如果没有就新增一个

3.只需要根据实际需求更改图片中的两个红框中的信息即可

其中：第一个红框是sass.bat的文件位置默认在ruby安装位置中bin目录下

第二个红框是生成的css文件位置、命名方式及风格，直接复制下面这行文本即可

--no-cache %FileName% ../css/%FileBaseName%.css --style expanded

结尾的 –style compact是编译风格有四个选项：nested expanded

compact compressed 。nested是默认的。风格区别参见开头sass安装链接中的文档。

两个红框信息填写完成后点击确定即可。

这时你在你的scss文件中ctrl+s保存时，会在同级目录下生成一个同名css文件。每次保存时都会更新。省去了手动编译的麻烦。

执行保存操作后在同级文件夹中生成同名css文件

Less

01.全局安装less

npm install -g less

//自定义函数插件，按需求安装

npm i less-plugin-functions -g

02.在hbuider中使用

触发命令地址，安装less地址

例：D:\nodejs\node_global\lessc.cmd

命令参数：%FileName% %FileBaseName%.css

03.确定，开始使用

cnpm install scss-loader scss -D

cnpm install less-loader less -D

原文地址：https://www.cnblogs.com/thbt/p/10414467.html

时间： 2024-08-30 10:57:46

在vue中使用scss或less的相关文章

在vue中使用scss

在webpack中,所有预处理器都要匹配相应的loader,vue-loader允许其他的webpack-loader处理组件中的一部分吗,然后它根据lang属性自动判断出要使用的loaders.所以,其实只要安装处理sass/scss的loader.就能在vue中使用scss了.现在我们来安装sass/scss loader npm install sass-loader node-sass --save-dev 参考: https://segmentfault.com/a/119000000

vue中使用scss

第一步安装scss依赖,cnpm i node-sass sass-loader -D 注:sass-loader用来解析scss文件(-D 是 --save-dev 的简写) 第二步: 在build文件夹下的webpack.base.conf.js的rules里面添加配置 { test: /\.scss$/, loaders: ['style', 'css', 'sass'] } 第三步: scss使用测试:如下测试修改字体颜色 <style lang="scss">

vue中引入样式文件

一.在vue中使用scss 首先进行安装如下依赖: cnpm i sass-loader node-sass -D 二.vue中引入样式文件 1)在index.html模板html文件中引入,这种方式引入的原样编译在生成的html文件中,如果想要通过link引入外部的样式文件,建议使用这种方式: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>2imis&

vue 项目中使用scss

npm install node-sass --save-dev //安装node-sass npm install sass-loader --save-dev //安装sass-loader npm install style-loader --save-dev //安装style-loader 在vue项目全局中引入scss 1.全局引用时需要安装sass-resources-loader npm install sass-resources-loader --save-dev 原文地址:

vue全局引入scss文件（推荐）

<template> <div id="app"> <router-view/> </div> </template> <script> export default { name: 'App' } </script> <style src="./assets/base.scss" lang="scss"> </style> 直接在app.

在vue中使用sass的配置的方法

1.创建一个基于 webpack 模板的新项目 vue init webpack myvue 2.在当前目录下,安装依赖 cd myvue npm install 3.安装sass的依赖包 npm install --save-dev sass-loader //sass-loader依赖于node-sass npm install --save-dev node-sass 4.在build文件夹下的webpack.base.conf.js的rules里面添加配置 { test: /\.sass

H5 localstorage本地缓存数据的封装以及在vue中的使用

vue中常用的每次增加数据要缓存每次删除数据也要缓存 storage.js 文件然后某个页面需要本地存储,就需要用 import引入:import storage from './storage.js' App.vue页面: <template> <div id="app"> <input type="text" v-model='todo' @keydown="doAdd

Vue 中数据流组件

好久不见呀,这两年写了很多很多东西,也学到很多很多东西,没有时常分享是因为大多都是我独自思考.明年我想出去与更多的大神交流,再修筑自己构建的内容. 有时候我会想:我们遇到的问题,碰到的界限,是别人给的还是我们自己给的?其实我觉得自己选择的方向是对的,但是有时难免会怀疑,是否有人和我在做一样的事情,我希望找到有趣的伙伴,做一些有趣的事情. Vue 中数据流组件又将年终了,该做年终总结了呀..最近花了一些时间,升级了一下我们的技术架构,使用 vue 作为我们的框架.延续传统,我们仍然需要开发一些

vue中引入Tinymce富文本编辑器

最近想在项目上引入一个富文本编辑器,之前引入过summernote,感觉并不太适合vue使用, 然后在网上查了查,vue中使用Tinymce比较适合, 首先,我们在vue项目的components文件夹中加入如下几个文件首先看一下Tinymce/dynamicLoadScript.js的内容: let callbacks = [] function loadedTinymce() { // to fixed https://github.com/PanJiaChen/vue-element-a