ZylCN 2019-11-12
最近朋友问如何在vue项目中使用scss样式,想起之前项目是直接在main.js直接import css
文件的,然而main.js不可以直接import scss
文件。
import ‘./assets/css.css‘
src/assets/scss.scss
$border-color:#c58f5d; .box{ width:100px; height: 100px; border:1px solid #f40; }
第一步:安装依赖
cnpm install node-sass --save-dev cnpm install sass-loader --save-dev cnpm install style-loader --save-dev cnpm install sass-resources-loader --save-dev
第二步:配置build/utils.js
scss: generateLoaders(‘sass‘) 改成 scss: generateLoaders(‘sass‘).concat( { loader: ‘sass-resources-loader‘, options: { resources: path.resolve(__dirname, ‘../src/assets/scss.scss‘) } } )
发现项目报错:Module build failed: TypeError: this.getResolve is not a function
sass-loader的版本过高导致的编译错误,当前最高版本是8.x,需要退回到7.3.1
运行:
npm uninstall sass-loader(卸载当前版本) npm install sass7.3.1 --save-dev
最后在vue组件中的style标签中添加lang="scss"
,就ok了。这样我们就实现了全局引入scss。
<style lang="scss"> .box2{width:100px;height:100px;border:1px solid $border-color;} </style>
在webpack.base.conf.js中的module.rules添加如下配置,可以实现引入其余的scss文件
{ test: /\.scss$/, loaders: ["style", "css", "sass"] },
<style lang="scss"> @import ‘../../assets/other.scss‘; .box2{width:100px;height:100px;border:1px solid $border-color;} </style>