标签：scss node 教程 vue sass -- dev loader install

VUE项目中SCSS的使用

vue项目上安装SCSS和开发入门

① 使用vue-cli模板创建新项目：vue init webpack 项目名

② 安装sass 依赖包 ，在cmd界面输入：

npm  install sass-loader --save-dev
npm install node-sass --sava-dev

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

{
test: /\.scss$/,
loaders: ['style', 'css', 'sass']
}
④ 使用scss时候在所在的style样式标签上添加lang=”scss”即可应用对应的语法，否则报错

⑤ scss使用测试：如下测试修改字体颜色

<style lang="scss">
$color:red;
div {color:$color;}
</style>
我这样做完以后，运行一下，报错

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

这是因为当前sass的版本太高，webpack编译时出现了错误，这个时候只需要换成低版本的就行，下面说一下修改方法，很简单，如下，

找到package.json文件，里面的 "sass-loader"的版本更换掉 就行了。

我本地是将 "sass-loader": "^8.0.0"，更换成了 "sass-loader": "^7.3.1",

执行命令，重新安装项目依赖：

npm install
然后重新  npm run dev 就完美的解决啦！

安装的第二种方法
安装node-sass
npm install node-sass --save-dev

推荐安装低版本node-sass

npm install node-sass@4.14.1 --save-dev

如果出现以下报错是因为node-sass版本过高导致编译错误

Module build failed: Error: Node Sass version 6.0.1 is incompatible with ^4.0.0.

解决方案：将node-sass版本调至4.14.1

npm uninstall node-sass
npm install node-sass@4.14.1 --save-dev
如果安装失败，可以使用淘宝镜像安装。

安装sass-loader
npm install sass-loader --save-dev

推荐安装低版本sass-loader

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

如果出现以下报错是因为sass-loader版本过高导致编译错误

Module build failed: TypeError: this.getOptions is not a function

解决方案：将sass-loader版本调至7.3.1

npm uninstall sass-loader
npm install sass-loader@7.3.1 --save-dev

二、配置
在webpack.base.conf.js文件下的配置rules

rules: [
...
{
test: /\.scss?$/,
loaders: ["style", "css", "sass"]
}
...
]

三、引用
<style lang="scss" scoped>
...
</style>

标签：scss,node,教程,vue,sass,--,dev,loader,install
来源： https://www.cnblogs.com/yongyuankuaile/p/15777328.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。