1 scss 运行环境
node-sassscss 文件需要在node平台运行,node-sass sass 是 scss sass的运行平台
2 安装依赖
node-sass
sass-loader 加载 Sass/SCSS 文件并将他们编译为 CS
css-loader 解析模块要的 css @import ...
mini-css-extract-plugin 将css语法提取单独的css 文件
html-webpack-plugin 打包html
webpack
webpack-cli
sass
3 创建webpack.config.js文件
module.exports={
mode:'development',
entry:'./src/index.js',
output: {
path:path.resolve(__dirname,'dist'),
filename:'[name].js'
},
}
4:配置loader和插件
constpath=require('path');
constMineCssExtractPlugin=require('mini-css-extract-plugin')
constHtmlWebpackPlugin=require('html-webpack-plugin')
module.exports={
mode:'development',
entry:'./src/index.js',
output: {
path:path.resolve(__dirname,'dist'),
filename:'[name].js'
},
module: {
rules: [
{
test:/\.s[ac]ss$/i,
exclude:/(node_modules|bower_components)/,
use: [
MineCssExtractPlugin.loader,
'css-loader',
'sass-loader'
]
},
]
},
plugins: [
newMineCssExtractPlugin({
filename:'[name].css'
}),
newHtmlWebpackPlugin({
template:'./index.html',
filename:'index.html',
chunks: ['main']
})
]
}
5 运行
开始打包
npx webpack
将打包后文件运行在浏览器上
