Magento如何在pwa专案中使用SASS或LESS_Magento教程

Magento如何在pwa专案中使用SASS或LESS

最模板 2022-04-25 14:58 Magento教程

当任何我们从github下载Magento PWA Studio来使用的时候，会发现PWA是希望直接使用CSS，没有通过的编译工具。如果你已经习惯SASS或LESS来编译CSS，那你一定很能够在PWA继续使用使用你的工具，要简单逼迫是那些巢状的CSS选择器，就可以把人给疯了。

这个文章就是要跟大家分享如何在PWA使用SASS及LESS。

在 PWA 中使用 SASS

一、安装依赖项

yarn add --dev sass-loader@10.1.1 node-sass@5.0.0

为了版本，所以我们直接指定安装版本，如果没有指定版本，在安装的时候可能会出现“ Syntax Error: TypeError: this.getOptions is not a function”这个错误消息。此时只要移除sass-loader

yarn remove sass-loader

再重新安装就可以了。另外node-sass这句话是为了指定与sass-loader 10.1.1 10.1.1的版本

二、编辑 webpack.config.js 并增加一个新的规则

 config.plugins = [
        ...config.plugins,
        new DefinePlugin({
            /**
             * Make sure to add the same constants to
             * the globals object in jest.config.js.
             */
            POSSIBLE_TYPES: JSON.stringify(possibleTypes),
            STORE_NAME: JSON.stringify('Venia')
        }),
        new HTMLWebpackPlugin({
            filename: 'index.html',
            template: './template.html',
            minify: {
                collapseWhitespace: true,
                removeComments: true
            }
        })
    ];
+
+   config.module.rules.push({
+       test: /.s[ca]ss$/,
+       use: [
+           'style-loader',
+           {
+               loader: 'css-loader',
+               options: {
+                   modules: true,
+                   sourceMap: true,
+                   localIdentName: '[name]-[local]-[hash:base64:3]'
+               }
+           },
+           'sass-loader'
+       ]
+   });

三、在组件中引用SASS档案首先创建一个myComponent.scss，接下来在component引用它：

import React from 'react';import defaultClasses from './myComponent.scss';
 
 
const MyComponent = () => (
    <div className={defaultClasses.root}>
        <button className={defaultClasses.button}>My Component</button>
    </div>);
 
 
export default MyComponent;

在 PWA 中使用 LESS
一、安装依赖项

yarn add --dev less-loader less

二、编辑 webpack.config.js 并增加一个新的规则

config.plugins = [
        ...config.plugins,
        new DefinePlugin({
            /**
             * Make sure to add the same constants to
             * the globals object in jest.config.js.
             */
            POSSIBLE_TYPES: JSON.stringify(possibleTypes),
            STORE_NAME: JSON.stringify('Venia')
        }),
        new HTMLWebpackPlugin({
            filename: 'index.html',
            template: './template.html',
            minify: {
                collapseWhitespace: true,
                removeComments: true
            }
        })
    ];
+
+   config.module.rules.push({
+       test: /.less$/,
+       use: [
+           'style-loader',
+           {
+               loader: 'css-loader',
+               options: {
+                   modules: true,
+                   sourceMap: true,
+                   localIdentName: '[name]-[local]-[hash:base64:3]'
+               }
+           },
+           'less-loader'
+       ]
+   });

三、在组件中引用LESS档案首先创建一个myComponent.less，在组件引用它：

import React from 'react';import defaultClasses from './myComponent.less';
 
 
const MyComponent = () => (
    <div className={defaultClasses.root}>
        <button className={defaultClasses.button}>My Component</button>
    </div>);
 
 
export default MyComponent;

上一篇：记录magento2.2网站打不开的解决过程
下一篇：Magento使用DES-CBC加密

通过SQL在Magento中导入产品评论

当客户看到具有好评的产品时，他们更有可能做出购买决定。另外，一些搜索引擎为具有产品评论的网站提供了比没有评论的网站更高的排名。由于Magento不支持导入产品评论的默认功...
2020-04-24
查找Magento2订单销量MySQL字段值序列化办

我们在Magento 2中进行数据库查询最近一个月的销量的时候，我们需要的是安装sku的下拉选项进行查找，既是看看今年那个产品卖得最好，销售的最好。那么我们如何做呢？首先我们要打...
2020-04-24
如何在Magento2安装配置中文汉化包

magento2版本与magento1相比较做中文汉化变化还是很大，今天最模板整理修正如下: 常用的安装方式有2种：方法一：通过composer安装中文包；安装中文包： composer require mageplaza/magento-2-chi...
2020-04-23
记录magento2.2网站打不开的解决过程

记录magento2.2网站打不开的解决过程 1.1apache找不到目录在域名根目录下找不到项目目录: 问题出在根目录的.htaccess文件中 1.2现在网站能打开,提示Magento\Framework\EscapeHelper does not exites 在m...
2020-09-08
Magento2网站每天都宕机，需要重启服务器

我在Magento 2.2.2中有一个电子商务网站，它几乎每天都在宕机死机。每当它发生故障时，用户得到的网站太长时间也会响应而且从未加载。为了让网站再次运行，我必须重新启动服务器然...
2020-02-25
如何在magento2.3 nginx配置https

现在有很多magento网站免费的https，基本上90%上线的网站都用了https。但是很多朋友对magento里的nginx配置https不熟悉，现在我们就来整理下。一，准备工作你至少需要提供如下必须用品...
2020-04-23
Magento2后台登录用户输入错误被锁住办法

Magento 2有时候在登录后台账号的时候，不小心输入的错误密码次数过多，这个时候Magento 2为了安全的考虑将你这个用户给锁住，既是不能登录了，即使你想起了正确的密码在输入登录也...
2020-04-24
解决Magento1发送邮件Email代码乱码办法

我们在做magento1活动或者开发插件的时候，时常为了通知用户就是用系统的email发送，但是如果你发送的内容是是日语或者其他语言的时，出现了乱码，发送email代码如下。 private functi...
2020-04-24
将Magento2从企业版迁移/降级到社区版

Magento 2企业版（EE）是Magento 2社区版（CE）的付费版本。如果您是一家渴望成长并期望巨大网站流量的企业，那么EE是您公司的最佳解决方案。此外，企业版完全由Magento团队支持。订户通...
2020-04-24
Magento2控制台命令总结

Magento 2开发与Magento 1完全不同Magento 2更依赖命令行操作整个系统，例如这些命令实际上在管理诸如缓存，升级，部署模式，索引器等方面非常方便。您可以通过运行以下命令检查整个命...
2020-04-24

Magento如何在pwa专案中使用SASS或LESS

Magento如何在pwa专案中使用SASS或LESS

相关文章