webpack搭建sass环境

亦木菜菜

于 2021-07-22 20:06:26 发布

阅读量997

点赞数

分类专栏： webpack搭建各类环境

本文链接：https://blog.youkuaiyun.com/weixin_54249422/article/details/119007765

版权

本文档介绍了如何使用webpack搭建SASS环境，包括安装必要的依赖如node-sass、sass-loader、css-loader等，配置webpack.config.js文件，以及运行打包和在浏览器中查看结果的步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 scss 运行环境

node-sass scss 文件需要在node平台运行,node-sass sass 是 scss sass的运行平台

2 安装依赖

node-sass
sass-loader 加载 Sass/Scss文件并将他们编译为 CSS
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和插件

const path = require('path');
const MineCssExtractPlugin = require('mini-css-extract-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    mode: 'development',
    e

最低0.47元/天解锁文章