标签：02 scss style less loader html 打包 css

1、打包css文件

         安装css-loader(打包css文件)  style-loader(将打包后的结果添加到html中)

         npm  install  css-loader style-loader  --save-dev

         在配置文件中添加：

 {
    test: /\.css$/, //检测是否是css文件
    use: ["style-loader", "css-loader"], //用css-loader处理文件，再用style-loader插入到html
 },

2、html打包

          安装html-webpack-plugin插件

          npm  install  html-webpack-plugin  --save-dev

          然后在配置文件中引入：

//引入html-webpack-plugin
const HtmlWebpackPlugin = require("html-webpack-plugin");

          配置：

plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",//打包的html文件
      filename:'index.html',//打包后的文件名称
    }),
],

3、打包less文件

          安装  npm  install  less less-loader  --save-dev

          配置：

{
   test:/\.less$/,
   use:["style-loader", "css-loader",'less-loader']
}

4、打包scss文件

          安装  npm  install  sass-loader node-sass --save-dev

          配置：

{
    test:/\.scss$/,
    use:["style-loader", "css-loader",'sass-loader']
}

标签：02,scss,style,less,loader,html,打包,css
来源： https://blog.csdn.net/Janicecat/article/details/121888067

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。