安装 sasl 和 python_geohash

今天小编就和同学一起来学习一下如何在vue文件里面能够使用less,scss的css预处理解析器，本篇的代码是基于手动配置Webpack之添加webpack-dev-server的基础上来进行修改的。

直接在vue文件里面使用less语法

先看看package.json文件

vue使用less

{  "name": "vue-webpack",  "version": "1.0.0",  "description": "",  "main": "index.js",  "scripts": {    "build": "webpack",    "dev": "webpack-dev-server --open"  },  "keywords": [],  "author": "",  "license": "ISC",  "devDependencies": {    "html-webpack-plugin": "^4.0.4",    "vue": "^2.6.11",    "vue-loader": "^15.9.1",    "vue-template-compiler": "^2.6.11",    "webpack": "^4.42.1",    "webpack-cli": "^3.3.11",    "webpack-dev-server": "^3.10.3"  }}

我们的vue文件内容如下：

vue中使用less语法

然后我们来运行下面的命令：

yarn install & yarn dev

接下来应该就会出现下面的错误：

没有less-loader出现的错误

错误的关键就是在：

You may need an additional loader to handle the result of these loaders.| | > .less_style{|     width: 200px;|     height: 200px; @ ./src/main.vue?vue&type=style&index=0&id=3c208292&lang=less&scoped=true& 1:0-149 1:165-168 1:170-316 1:170-316 @ ./src/main.vue @ ./src/index.js

也就是说你需要一个loader来处理下面的语句，其实这个时候我们就要安装一个less-load。

安装less-loader

有心的同学肯定要问一个问题，我要安装什么样的loader(或者说插件)，这个就需要配置相应的webpack,既然要配置webpack就需要在webpacke官方文档中找，less-loader的webpack配置(https://www.webpackjs.com/loaders/less-loader/)，为什么小编会提出这个问题呢？因为小编在学习的时候就有这样的疑问，但是大多数的教程里面都不会教你如何学习或者说为什么需要安装，在哪里去找资料等等这些学习方法，好了，看看官方怎么说的：

安装less-loader

这里需要注意他下面的一句话：

The less-loader requires less as peerDependency. Thus you are able to control the versions accurately.

意思就是说less-loader需要依赖less这个包，所以我们需要安装less和less-loader

npm install --save-dev less-loader less

配置webpack.config.js

这里还是要强调一下，因为我们的项目是使用webpack进行开发调试，打包发布的，所以既然我们安装了一些需要特殊处理的文件就需要对应的插件或包，不是说安装任何一个包就需要配置webpack哦，这个就要安装的什么样的包，不要闲啰嗦，因为小编自己在学习的时候经常都是稀里糊涂的安装一些包，有些都不知道做什么为什么要安装，好了，webpack的官方实例配置如下：

// webpack.config.jsmodule.exports = {    ...    module: {        rules: [{            test: /.less$/,            use: [{                loader: "style-loader" // creates style nodes from JS strings            }, {                loader: "css-loader" // translates CSS into CommonJS            }, {                loader: "less-loader" // compiles Less to CSS            }]        }]    }};

这里就是在module这个配置下面的rules添加一个解析规则就好，这里为什么需要"style-loader css-loader",官方给一下说明：

将 css-loader、style-loader 和 less-loader 链式调用，可以把所有样式立即应用于 DOM。

所以这个还要安装styel-loader,css-loader

yarn add css-loader style-loader -S 或 cnpm i css-loader style-loader

这个可以在webpack.config.js里面不加css-loader,style-loader会产生什么效果。

运行一下

这些就没有错了。

安装scssloader

官方的loader

sass-loader sass

链接地址(https://webpack.js.org/loaders/sass-loader/#root)

我们只需要安装sass-loader sass这两个就可以了

cnpm install sass-loader sass  --save-dev

sass的webpack配置

sass webpack配置

module.exports = {  module: {    rules: [      {        test: /.s[ac]ss$/i,        use: [          // Creates `style` nodes from JS strings          'style-loader',          // Translates CSS into CommonJS          'css-loader',          // Compiles Sass to CSS          'sass-loader',        ],      },    ],  },};

我的webpackage.config.js,module-rules配置

module: {        rules: [{            test: /.vue$/,            use: ["vue-loader"]        },        {            test: /.less$/,            use: [                "style-loader", // creates style nodes from JS strings                "css-loader", // translates CSS into CommonJS                "less-loader", // compiles Less to CSS            ]        },        {            test: /.s[ac]ss$/i,            use: [              // Creates `style` nodes from JS strings              'style-loader',              // Translates CSS into CommonJS              'css-loader',              // Compiles Sass to CSS              'sass-loader',            ],        }        ]            },

这里无论是.sass还是.scss文件都能够处理，这里less的多个loader我就直接把上面的每一个loader对象给去掉了。

scss语法测试

vue文件的：

less,scss语法

这里都使用了less,scss语法进行测试。

scss测试结果

OK，测试正常。 

欢迎大家在评论区评论，如有热爱前沿IT技术可以跟小编多交流，也让小编多学习学习。

Share your knowledge with the world