webpack之使用less和scss

前言：

本文以sass为例，

• 演示了项目中如何配置应用sass文件。
• 如何让sass文件同样支持模块化。
  

其实，应用sass或者less，是指先将文件交给sass-load或者less-loader处理成css文件，然后再交给css-loader、style-loader进行处理。

如果你的项目中使用了scss。

安装sass-loader、node-sass

$ npm i -D sass-loader node-sass

在src/common/style目录下新增文件main.scss,编辑main.scss内容如下：

我们目前的项目目录：

编辑app.js如下：

配置webpack.config.js如下：

首先，以.scss结尾的文件会被sass-loader处理成正常的css文件，接着再交给css-loader、style-loader进行处理。

执行npm run dev，在浏览器打开http://localhost:8080/。可以看到scss文件中的样式正常显示。

如何让scss文件也支持模块化？

改一下webpack.config.js的配置：

编辑app.js文件：

执行npm run dev，在浏览器打开http://localhost:8080/。可以看到scss文件中的样式正常显示,css模块化成功！

同样，根据《webpack之css模块化》你也可以选择性的配置哪些scss文件需要模块化，哪些不需要。

同理，如果项目中应用了less

需要的loader：less-loader、less

$ npm i -D less-loader less

webpack.config.js中只需要更改相应配置即可。