说明
玩转webpack课程学习笔记。
解析 Less 和 SaSS
1、安装依赖（以less为例）
npm i less less-loader -D
less-loader 用于将 less 转换成 css。
2、search.less测试文件
.search-text { font-size: 48px; color: red; }
3、search.js测试文件
import React from 'react'; import ReactDOM from 'react-dom'; import './search.less'; // 引用less文件 class Search extends React.Component { render() { return <div className="search-text">Search Text</div> } } ReactDOM.render( <Search/>, document.getElementById('root') )
4、webpack.config.js配置
const path = require('path'); module.exports = { entry: { index: './src/index.js', search: './src/search.js' }, output: { path: path.join(__dirname, 'dist'), filename: '[name].js' }, mode: 'production', module: { rules: [ { test: /.less$/, use: [ 'style-loader', 'css-loader', 'less-loader' ] } ] } };
5、浏览器打开index.html文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="root"></div> <script src="./search.js"></script> </body> </html>
