easywebpack
基于 Webpack 前端工程构建方案

Css Style

easywebpack - 基于 Webpack 前端工程构建方案, 支持 Webpack Vue, React, Weex, JS, Weex等多种前端框架构建, 包括 Webpack Vue SSR, Webpack React SSR 构建。
Date:  2019-12-23
Word Count:  115
Read Times:  1 Min
Read Count: 

开启 Sass （默认禁用）

  • webpack.config.js
// ${app_root}/webpack.config.js
module.exports = {
  module:{
     rules:[
       {
         scss: true
       }
     ]
  }
}
  • 添加 sass 依赖
// ${app_root}/package.json
{
  "devDependencies": {
    "node-sass": "^4.5.3",
    "sass-loader": "^6.0.6",
  }
}

开启 Less （默认禁用）

  • webpack.config.js
// ${app_root}/webpack.config.js
module.exports = {
  module:{
     rules:[
       {
         less: true
       }
     ]
  }
}
  • 添加 less 依赖
// ${app_root}/package.json
{
  "devDependencies": {
    "less": "^2.7.2",
        "less-loader": "^4.0.5",
  }
}

开启 Stylus （默认禁用）

  • webpack.config.js
// ${app_root}/webpack.config.js
module.exports = {
  module:{
     rules:[
       {
         stylus: true
       }
     ]
  }
}
  • 添加 stylus 依赖
// ${app_root}/package.json
{
  "devDependencies": {
    "stylus": "^0.54.5",
        "stylus-loader": "^3.0.0",
  }
}
Author: sky
Link: https://easyjs.cn/easywebpack/css/
yuque: https://yuque.com/easy-team/easywebpack/css/
Reprint policy: All articles in this blog are used except for special statements CC BY 4.0 reprint polocy. If reproduced, please indicate source sky !
 Previous
webpack.config.js webpack.config.js
webpack.config.js
2019-12-23 sky
Next 
Css Module Css Module
easywepack4easywebpack4 默认提供 /\.module\.(css|less|scss|stylus)/  的文件规范的 CSS Module 特性，把 css module 的样式文件改成 /\.module\.(css|less|scss|stylus)/  规范，这...
2019-12-23 sky