您的当前位置:首页vue里使用sass配置步骤详解
广告

vue里使用sass配置步骤详解

2023-11-30 来源:旭新科技网
这次给大家带来vue里使用sass配置步骤详解,vue里使用sass配置的注意事项有哪些,下面就是实战案例,一起来看一下。

1、创建一个基于 webpack 模板的新项目

$ vue init webpack myvue

2、在当前目录下,安装依赖

$ cd myvue$ npm install

3、安装sass的依赖包

npm install --save-dev sass-loader//sass-loader依赖于node-sassnpm install --save-dev node-sass

4、在build文件夹下的webpack.base.conf.js的rules里面添加配置

{ test: /.sass$/, loaders: ['style', 'css', 'scss']}

如下图所示:

5、在APP.vue中修改style标签

<style lang="scss">

6、然后运行项目

$ npm run dev

7、修改APP.vue的样式,可以看下效果

8、运行结果背景变成灰色吗,说明你已成功配置好sass

相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

推荐阅读:

nodejs对密码加密处理方法总结

vue数据传递方法总结

小编还为您整理了以下内容,可能对您也有帮助:

如何在VUE项目中使用SCSS

安装如下包,sass是依赖于node-sass ,所以要安装node-sass

npm install node-sass --save-dev

npm install sass-loader --save-dev  

找到build目录下的webpack.base.conf.js文件,在mole/rules下增加如下配置

{

test: /\.sass$/,

loaders: ['style','css','scss']

}

在使用的时候在style标签上添加 lang="scss"  ,import引入scss文件,

<style lang="scss">

@import 'css/index.scss';

</style>

以上操作就可以了,如果编译出现错误,那可能就是版本过高的原因,所以需要降低版本

npm uninstall sass-loader

npm install sass-loader@7.0.3 --save-dev

vue 项目如何引进 sass?

在Vue项目中引入Sass,您需要安装node-sass和sass-loader依赖包。然后在项目的根目录中创建一个名为vite.config.js的文件,配置loader。最后,在build目录下的webpack.base.conf文件中,将style-loader替换为css-loader和sass-loader即可。

全局SASS/SCSS变量在Vue项目中应用解决方案

如果要在组件中使用,必须导入相应的资源文件。

每个需要用到变量的vue文件都需要做导入操作,简化操作,可以使用 sass-resources-loader

参考官网 sass-resources-loader 。如果使用vue-cli,可以参考 vue-cli自动化导入

这里以vue-cli4为例,具体实现如下:

1.首先,在scss中配置要导出的变量

2.在vue文件导入变量并使用

uniapp全局引入sass

1、首先你要安装node-sass,因为sass-loader依赖于它。

2、安装sass-loader。

3、修改style标签,声明使用sass,单个页面使用。

4、如果需要在App.vue全局引入sass,需要补上lang="scss"标签

uniapp全局引入sass

1、首先你要安装node-sass,因为sass-loader依赖于它。

2、安装sass-loader。

3、修改style标签,声明使用sass,单个页面使用。

4、如果需要在App.vue全局引入sass,需要补上lang="scss"标签

vue sass 安装

1、node 安装依赖

npm install node-sass --save-dev

npm install sass-loader --save-dev

2、sass全局引用

npm install --save-dev sass-resources-loader

配置build/utils.js

function resolveResource(name) {

return path.resolve(__dirname, '../static/style/' + name);

}

function generateSassResourceLoader() {

var loaders = [

cssLoader,

    'sass-loader',

    {

loader:'sass-resources-loader',

      options: {

// 多个文件时用数组的形式传入,单个文件时可以直接使用path.resolve(__dirname, '../static/style/blog.scss'

        resources: [resolveResource('blog.scss')]

}

}

];

  if (options.extract) {

return ExtractTextPlugin.extract({

use: loaders,

      fallback:'vue-style-loader'

    })

}else {

return ['vue-style-loader'].concat(loaders)

}

}

return {

css:generateLoaders(),

  postcss:generateLoaders(),

  less:generateLoaders('less'),

  // sass: generateLoaders('sass', { indentedSyntax: true }),

// scss: generateLoaders('sass'),

//配置sass-resources-loader

  sass:generateSassResourceLoader(),

  scss:generateSassResourceLoader(),

  stylus:generateLoaders('stylus'),

  styl:generateLoaders('stylus')

}

webstorm vue文件中写sass提示错误,应该怎么配置才能不提示错误

Webstorm是一个很牛叉的IDE,现在工作每天都是用它了。

最近开始用SASS,LESS等来写CSS,而在Webstorm中,它自带一个File Watchers功能,设置一下,即可实时编译SASS,LESS等。

LESS的实时编译很简单,在node平台安装一下即可。

而在折腾SASS在Webstorm上的实时编译时,花了我一点时间。因为按照网上的教程设置都不成功,最后自己把设置改来改去终于折腾好了。

下面就是在WebStorm设置SASS的File Watchers的步骤:

1. 安装Ruby

,去这里下载,然后安装。

2. 安装Sass

安装好Ruby后,打开CMD命令,输入:

gem install sass

注意:

这里有可能安装没反应或提示网络错误什么的。解决办法是使用淘宝的Ruby gem镜像:

$ gem sources --remove

$ gem sources -a

$ gem sources -l

*** CURRENT SOURCES ***

# 请确保只有 ruby.taobao.org

$ gem install sass

3. 上面都安装没问题以后,就可以设置Webstorm或PHPStorm了

3.1 打开Webstorm的设置界面,然后搜索File Watcher;

3.2 点击File Watchers界面的增加按钮;

3.3 然后设置界面如下:

注意:

如果你想用SCSS,并且Ruby是安装在默认路径下,那么”File Type:“和”Program:“那里的设置就和我一样;

如果是用SASS,那么你在新建时应该选择SASS的类型,”Program:“也应该选”sass.bat“。

A

旭新科技网还为您提供以下相关内容希望对您有帮助:

如何在VUE项目中使用SCSS

npm install sass-loader --save-dev  找到build目录下的webpack.base.conf.js文件,在module/rules下增加如下配置 { test: /\.sass$/,loaders: ['style','css','scss']} 在使用的时候在style标签上添...

vue-cli 如何使用scss

1、全局安装 vue-cli npm install --global vue-cli 2、创建一个基于 webpack 模板的新项目 vue init webpack my-project 3、安装依赖 cd my-project$ npm install 4、为了使用sass,我们需要安装sass的依赖包 npm in...

脚手架搭建的vue2项目中使用sass

1.基础配置 安装环境:安装成功就可以在项目中使用sass 全局注册scss:vue.config.js配置 然后重新运行,就可使用 2.换肤小案例:最后看一下展示效果吧

全局SASS/SCSS变量在Vue项目中应用解决方案

1.首先,在scss中配置要导出的变量 2.在vue文件导入变量并使用

vue sass 安装

1、node 安装依赖 npm install node-sass --save-dev npm install sass-loader --save-dev 2、sass全局引用 npm install --save-dev sass-resources-loader 配置build/utils.js function resolveResource(name) { return ...

uniapp全局引入sass

1、首先你要安装node-sass,因为sass-loader依赖于它。2、安装sass-loader。3、修改style标签,声明使用sass,单个页面使用。4、如果需要在App.vue全局引入sass,需要补上lang="scss"标签 ...

webpack 配置scss||less全局样式(自定义的,vue-cli2/3)

安装 sass-resources-loader 修改build中的utils.js vue.config.js 不需要安装 sass-resources-loader 只需要确保安装了 node-sass sass-loader 有些会报错 这样配置后在 直接使用 vue.config.js 确保安装了 no...

webstorm vue文件中写sass提示错误,应该怎么配置才能不提示错误_百度知 ...

下面就是在WebStorm设置SASS的File Watchers的步骤:1. 安装Ruby ,去这里下载,然后安装。2. 安装Sass 安装好Ruby后,打开CMD命令,输入:gem install sass 注意:这里有可能安装没反应或提示网络错误什么的。解决办法是使用...

vue 安装scss 运行vue项目报错

1、 安装 npm install sass-loader@6.0.0 node-sass --save-dev 2.在build文件夹下的webpack.base.conf.js的rules里面添加配置 {     test: /\.sass$/,    loaders: ['style', '...

在Vue中使用sass及sass图片路径问题

{"vue":true,"id":"data-v-7ba5bd90","scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false}!./node_modules/vue-loader/lib/selector.js?type=styles&amp;index=...

Top