说明

​​玩转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>

webpack基础篇（六）：资源解析--解析 Less 和 Sass_css