webpack:
const HtmlWebpackPlugin = require('html-webpack-plugin');
const autoprefixer = require('autoprefixer');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const eslintFormatter = require('react-dev-utils/eslintFormatter');
const htmlWebpackPluginConfig = new HtmlWebpackPlugin({
template: './src/index.html',
filename: './index.html',
});
const miniCssExtractConfig = new MiniCssExtractPlugin({
filename: '[name].[hash].css',
chunkFilename: '[id].[hash].css',
});
module.exports = {
entry: './src/index.js',
output: {
path: `${__dirname}/dist`,
publicPath: '/',
filename: 'main.js',
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
},
{
options: {
formatter: eslintFormatter,
eslintPath: require.resolve('eslint'),
},
loader: require.resolve('eslint-loader'),
},
],
},
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: [
autoprefixer({
browsers: ['> 0%'],
}),
],
sourceMap: true,
},
},
],
},
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: [
autoprefixer({
browsers: ['> 0%'],
}),
],
sourceMap: true,
// module: true,
// localIdentName: '[name]__[local]__[hash:base64:5]',
},
},
'less-loader',
],
},
],
},
resolve: {
extensions: ['.js', '.jsx', '.css', '.less'],
},
plugins: [
htmlWebpackPluginConfig,
miniCssExtractConfig,
autoprefixer,
],
devServer: {
contentBase: './dist',
open: 'chrome',
},
};
Компонент:
// @flow
import * as React from 'react';
import styles from './Header.less';
// возвращает undefined на месте styles.header
export const Header = ({ children }) => (
<nav className={`${styles.header} navbar navbar-dark bg-dark`}>
<div className="container">
<div className="row m-auto">
<i className="fa fa-film fa-2x text-white my-auto" />
<div className="h3 ml-3 my-auto text-light">{children}</div>
</div>
</div>
</nav>
);
