前言：

本文以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中只需要更改相應配置即可。