vue开发实战2.0.2——使用scss

首先,按规矩先引用一段官方定义:
Sass 是一款强化 CSS 的辅助工具,它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能,这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库(如 Compass)有助于更好地组织管理样式文件,以及更高效地开发项目。

总结:

引入node-sass、sass-loader、scss、scss-loader即可。

过程:

在VUE项目中使用SCSS,在main.js中引入scss文件时报:

* @/styles/index in ./src/main.js

To install it, you can run: npm install --save @/styles/index

缺少对scss的加载器,引入sass-loader:

$ npm install sass-loader --save
+ [email protected]
added 9 packages from 16 contributors in 9.071s

并在webpack.base.conf.js的rules里添加配置,使对scss文件使用style-loader、css-loader、sass-loader加载器处理:

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

运行项目,报:

错误cannot find module 'node-sass',再引入node-sass:

$ npm install node-sass --save

> [email protected] install /Users/ycy/firstVue/node_modules/node-sass
> node scripts/install.js

Cached binary found at /Users/ycy/.npm/node-sass/4.9.3/darwin-x64-64_binding.node

> [email protected] postinstall /Users/ycy/firstVue/node_modules/node-sass
> node scripts/build.js

Binary found at /Users/ycy/firstVue/node_modules/node-sass/vendor/darwin-x64-64/binding.node
Testing binary
Binary is fine
+ [email protected]
added 44 packages from 61 contributors in 10.31s

引入后在运行项目,报:

错误This dependency was not found,引入scss、scss-loader。

猜你喜欢

转载自blog.csdn.net/guishifoxin/article/details/82870587