本章演示对css less scss的支持
webpack从0开始搭建react的ts开发环境（6）
demo https://github.com/757566833/webpack-guide
- 安装对应的loader
这里不再解释style-loader和 mini-css-extract-plugin的具体细节
样式文件最终要拆成单独的css文件，就不演示那么多了，一步到位
yarn add mini-css-extract-plugin css-loader --dev
2.添加css支持 webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");
// 这里增加
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry: './src/app.tsx',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'app.js'
},
module: {
rules: [{
test: /\.tsx?$/,
loader: "ts-loader",
exclude: /node_modules/,
},
//这里增加
{
test: /\.css$/,
use: [{
loader: MiniCssExtractPlugin.loader,
},
{
loader: "css-loader",
},
],
exclude: /node_modules/,
},
]
},
plugins: [
new HtmlWebpackPlugin({
title: "test",
template: path.resolve(__dirname, "template.html"),
}),
//这新加
new MiniCssExtractPlugin({
filename: "app.css",
}),
]
};
3.src下的app.tsx文件修改为
import React from "react";
import ReactDOM from "react-dom";
import './app.css'
class App extends React.Component {
public render() {
return (
<div>
<div className='red'>hello red</div>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
4.在src下新加css文件app.css
.red{
color:red
}
5.npm run webpack
- 打开dist下的index.html
7.添加less支持
// 由于antd目前的稳定版为3，所以我们只装less@2
yarn add less@2.7.3 less-loader --dev
8.添加webpack的loader
const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry: './src/app.tsx',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'app.js'
},
module: {
rules: [{
test: /\.tsx?$/,
loader: "ts-loader",
exclude: /node_modules/,
},
{
test: /\.css$/,
use: [{
loader: MiniCssExtractPlugin.loader,
},
{
loader: "css-loader",
},
],
exclude: /node_modules/,
},
{
test: /\.less$/,
use: [{
loader: MiniCssExtractPlugin.loader,
},
{
loader: "css-loader",
},
{
loader: "less-loader",
},
],
},
]
},
plugins: [
new HtmlWebpackPlugin({
title: "test",
template: path.resolve(__dirname, "template.html"),
}),
new MiniCssExtractPlugin({
filename: "app.css",
}),
]
};
9.新建src/app.less
.green{
color: green;
}
10.index/app.tsx修改
import React from "react";
import ReactDOM from "react-dom";
import './app.css'
import './app.less'
class App extends React.Component {
public render() {
return (
<div>
<div className='red'>hello red</div>
<div className='green'>hello green</div>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
11.npm run webpack
12.添加sass支持
yarn add sass-loader node-sass --dev
13.修改webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry: './src/app.tsx',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'app.js'
},
module: {
rules: [{
test: /\.tsx?$/,
loader: "ts-loader",
exclude: /node_modules/,
},
{
test: /\.css$/,
use: [{
loader: MiniCssExtractPlugin.loader,
},
{
loader: "css-loader",
},
],
exclude: /node_modules/,
},
{
test: /\.less$/,
use: [{
loader: MiniCssExtractPlugin.loader,
},
{
loader: "css-loader",
},
{
loader: "less-loader",
},
],
},
{
test: /\.scss$/,
use: [{
loader: MiniCssExtractPlugin.loader
}, {
loader: 'css-loader',
}, {
loader: 'sass-loader'
}],
exclude: /node_modules/
},
]
},
plugins: [
new HtmlWebpackPlugin({
title: "test",
template: path.resolve(__dirname, "template.html"),
}),
new MiniCssExtractPlugin({
filename: "app.css",
}),
]
};
14.修改app.tsx
import React from "react";
import ReactDOM from "react-dom";
import './app.css'
import './app.less'
import './app.scss'
class App extends React.Component {
public render() {
return (
<div>
<div className='red'>hello red</div>
<div className='green'>hello green</div>
<div className='blue'>hello blue</div>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
15.添加src/app.scss
.blue {
color: blue
}
16.npm run webpack
17.打开dist/index.html
webpack从0开始搭建react的ts开发环境（8）
网友评论