Vue进阶（幺柒柒）：Vue应用Sass、Scss、Less和Stylus

Vue项目中使用预处理器，可以有效减少css代码量， 推荐使用Sass、Scss、Less预处理器。可以在创建项目的时候选择预处理器 (Sass/Less/Stylus)。

如果当时没有选择，内置的 webpack 仍然会被预配置为可以完成所有的处理，也可以手动安装相应的 webpack loader：

1# Sass
2npm install -D sass-loader node-sass
3
4# Less
5npm install -D less-loader less
6
7# Stylus
8npm install -D stylus-loader stylus 

然后就可以导入相应的文件类型，或在 .vue 文件中这样来使用：

1<style lang="scss">
2   $color: red;
3</style> 

下面主要讲解一下vue中使用less或者sass的方法，以less为例(style.less)

主要是两种

1.对于写在vue文件中的less:

所有vue文件的<style lang="less"></style>,会被vue-loader处理编译到一个css文件中，最终自动通过link标签写入index.html（在vue-loader.conf.js中配置）

1<style scoped lang="less">
2.notFoundPage {
3    background-color: #0a8acd;
4    color: #fff;
5    position: relative;
6    h1 {
7        font-weight: 500;
8    }
9}
10</style> 

2.对于外部less文件：

一是在main.js中import style.less 。

此时webpack会把style.less和各个vue文件的less部分一起编译到同一个css文件，并在index.html的link中自动引入。

二是在webpack的入口文件entry中加上style.less，编译完的出口文件会被自动注入到index.html文件中。

1entry: {
2  app: './src/main.js',
3  style: './src/style/style.less'
4}, 

1
2注：
3
4在`vue2.x`的`webpack.base.conf.js`：
5

{ test: /.vue$/, loader: 'vue-loader', options: vueLoaderConfig },

1
2这段是针对`.vue`文件的处理规则，其中`vueLoaderConfig`是`vue-cli`自己定义的加载器，专门处理`css`样式
3
4`vueLoaderConfig`引用的`utils.js`:
5

return { css: generateLoaders(), postcss: generateLoaders(), less: generateLoaders('less'), sass: generateLoaders('sass', { indentedSyntax: true }), scss: generateLoaders('sass'), stylus: generateLoaders('stylus'), styl: generateLoaders('stylus') }

1
2所以不需要再在`rules`里写`.css` `.less` 的处理规则了。
3
4[](https://shq5785.blog.csdn.net/article/details/114239396)注
5------------------------------------------------------------
6
7如碰到下面错误
8

Module build failed: TypeError: this.getResolve is not a function at Object.loader (F:\code\myGit\vue\node_modules\sass-loader\dist\index.js:52:26)

1
2因`sass-loader`版本过高，`webpack`编译失败，解决方法：
3
4修改`sass-loader` 版本(`^8.0.0 => ^7.3.1`)
5

npm install sass-loader@7.3.1 --save

1
2[](https://shq5785.blog.csdn.net/article/details/114239396)拓展阅读
3---------------------------------------------------------------
4
5*   [vue-cli3文档](https://cli.vuejs.org/zh/guide/css.html#%E5%90%91%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8-loader-%E4%BC%A0%E9%80%92%E9%80%89%E9%A1%B9)
6*   《[Vue进阶（幺柒陆）：CSS预编译语言Sass、Scss、Less和Stylus](https://shq5785.blog.csdn.net/article/details/114214033)》
7
8 
9
10  
11
12本文转自 [https://shq5785.blog.csdn.net/article/details/114239396](https://shq5785.blog.csdn.net/article/details/114239396)，如有侵权，请联系删除。