zoukankan      html  css  js  c++  java
  • 给kbone项目添加sass转换功能

    使用 kbone-cli创建的项目默认只有 css 和 less,并不支持 sass ,因此本文主要描述下在 kbone 中引入 sass。

    1、首先在项目中安装 node-sass 和 sass-loader

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

       node-sass 比较难安装,经常会报各种错误。

    2、在 webpack.config.dev.js 和 webpack.config.prod.js 配置文件中新增 sass 打包配置

    // 修改前
    module: {
        ...
        {
                test: /.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
         },
        // "postcss" loader applies autoprefixer to our CSS.
        // "css" loader resolves paths in CSS and adds assets as dependencies.
        // "style" loader turns CSS into JS modules that inject <style> tags.
        // In production, we use a plugin to extract that CSS to a file, but
        // in development "style" loader enables hot editing of CSS.
        {
           test: /.css$/,
           use: [
              require.resolve('style-loader'),
              ...
           ]
         }
         ...
    }
    
    
    // 修改后
    module: {
        ...
        {
                test: /.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
         },
         {
                test: /.scss$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'sass-loader'
                ]
          },
        // "postcss" loader applies autoprefixer to our CSS.
        // "css" loader resolves paths in CSS and adds assets as dependencies.
        // "style" loader turns CSS into JS modules that inject <style> tags.
        // In production, we use a plugin to extract that CSS to a file, but
        // in development "style" loader enables hot editing of CSS.
        {
           test: /.css$/,
           use: [
              require.resolve('style-loader'),
              ...
           ]
         }
         ...
    }
    

      注:在 less 的配置后面新增 sass 配置就可以了,红色为新增代码。

    3、webpack.mp.config.js 小程序打包配置文件

    // 改动前
    
    module: {
        rules: [
            {
                    test: /.css$/,
                    use: [
                        MiniCssExtractPlugin.loader,
                        'css-loader'
                    ],
            },
            ...
        ]
    }
    
    
    // 改动后
    module: {
        rules: [
            {
                    test: /.css$/,
                    use: [
                        MiniCssExtractPlugin.loader,
                        'css-loader'
                    ],
            },
            ...
            {
                    test: /.scss$/,
                    use: [
                        MiniCssExtractPlugin.loader,
                        'css-loader',
                        'sass-loader'
                    ]
            },
            ....
        ]
    }
        
    

      注:在 less 或者 css 的加载器后面添加换行配置即可。

    4、完成

  • 相关阅读:
    标准粒子群算法(PSO)
    Java开发中的23种设计模式详解
    分布式事务
    sjk 分页
    有用吗2
    有用吗1
    存储过程
    在虚拟机Linux安装Redis
    ajax调用WebAPI添加数据
    SVN安装和使用(简单版)
  • 原文地址:https://www.cnblogs.com/ayseeing/p/12504095.html
Copyright © 2011-2022 走看看