vuescss（vuescss不好使）

本篇文章给大家谈谈vuescss，以及vuescss不好使对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、vue3中使用scss全局变量
• 2、vue 安装scss 运行vue项目报错
• 3、全局SASS/SCSS变量在Vue项目中应用解决方案
• 4、Vue vue 使用 lang="scss" 报错
• 5、如何在VUE项目中使用SCSS
• 6、vue|引入scss错误

vue3中使用scss全局变量

1、安装库： sass-resources-loader

安轮芦陵装命令 install sass-resources-loader --save-dev

2、vue.config.js 配置

3、已经可以在任何组件中哗历，使用腊戚全局变量了

[img]

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', 'css', 'sass']

},

3.vue组件引入

style lang="scss"/style

报错截图

原册档因:

webpack-dev-server版本和vue版本不一样，需要将webpack-dev-server卸载了，安装对应版本

解决方法：

1 查看vue-cli版本是辩冲 vue -V

2 卸载npm uninstall webpack-dev-server

3 安装npm i webpack-dev-server@3.0.0

4 安装npm install webpack cli -D

5 正常启动。

报错截图

npm install --legacy-peer-deps 即可成功安装 node_modules

webpack 3.6.0 对应版本应安装

npm i sass-loader@7.1.0 -D

npm install node-sass@4.14.1 -D

npm i sass-loader node-sass -D 安装最新版本的 提示报错如下

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

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

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

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

这里以vue-cli4为例，具体实现如下：

1.首先，在顷颂scss中配置要导出的变量

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

Vue vue 使用 lang="scss" 报错

原文链接：

新建的项目使用 lang="scss 报错，如下所示：

解决方法：

输敬银入如下命令盯塌：

不能直接使用命令：

不然亮则宴会报以下错误：

Module build failed: TypeError: this.getResolve is not a function at Object.loader

1

因为当前sass的版本太高，webpack编译时出现了错误，所以指定：npm install sass-loader@7.3.1 --save-dev 安装低版本的。

接下来，在build/webpack.base.config.js中添加：

如图：

如何在VUE项目中使用SCSS

安装如下包，sass是依赖于node-sass ，所庆拦游以要安装node-sass

npm install node-sass --save-dev

npm install sass-loader --save-dev  

找到build目录下的webpack.base.conf.js文件，在module/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|引入scss错误

This relative module was not found:

* ./style.scss in ./src/main.js

Error from chokidar (D:\): Error: EBUSY: resource busy or locked, lstat 'D:\pagefile.sys'

原因是：

已经建好早姿了scss，纳茄在main.js删陆茄绝除了，就能运行了

关于vuescss和vuescss不好使的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。