与Webpack样式的用户界面
与Webpack样式的用户界面
我们没有时间花在用户界面的设计。像专业人士那样的风格,我们将使用一个现代堆栈,基于Webpack。添加一个Symfony触摸ob娱乐下载和放宽与应用程序的集成,让我们使用Webpack安可。
为你创建了一个完整的Webpack环境:package.json和webpack.config.js已经生成并包含良好的默认配置。开放webpack.config.js,它使用配置Webpack安可抽象。
的package.json文件定义了一些不错的命令,我们将使用所有的时间。
的资产目录包含项目资产的主要入口点:风格/ app.css和app.js。
使用萨斯
而不是使用纯CSS,让我们转向萨斯:
1
美元mv资产/风格/应用程序。css /风格/ app.scss资产1 2 3 4 5 6 7 8 9 10 11
- - - /资产/ app.js+ + + b /资产/ app.js7 + 6、7 @@ @@ 6日* / / /任何CSS导入将输出到一个CSS文件(在本例中app.css)进口”。/风格/ app.css ';+进口“。/风格/ app.scss”;/ /启动刺激应用程序导入”。/引导;安装Sass加载程序:
1
美元纱添加node-sass sass-loader - dev并使webpack Sass加载程序:
1 2 3 4 5 6 7 8 9 10 11
- - - a / webpack.config.js+ + + b / webpack.config.js@@ -56 7 + 56 7 @@安可})/ /使Sass / SCSS支持- / / .enableSassLoader ()+ .enableSassLoader ()/ /取消如果你使用打印稿/ / .enableTypeScriptLoader ()我怎么知道哪些包安装吗?如果没有他们,我们曾试图构建资产安可将给我们一个很好的显示错误消息纱添加加载命令安装所需依赖关系.scss文件。
利用引导
开始好违约和建立一个反应网站,像一个CSS框架引导还有很长的路要走。安装包:
1
美元纱添加引导@popperjs /核心bs-custom-file-input - dev需要引导的CSS文件(我们也清理文件):
1 2 3 4 5 6 7
- - - /资产/风格/ app.scss+ + + b /资产/风格/ app.scss@@ @@ 1,3 + 1身体{背景颜色:浅灰色;- - - - - -}+ @ import ~引导/ scss /引导的;做同样的JS文件:
1 2 3 4 5 6 7 8 9 10 11 12 13
- - - /资产/ app.js+ + + b /资产/ app.js6 + 7,10 @@ @@ 7日/ /任何CSS导入将输出到一个CSS文件(在本例中app.css)进口“。/风格/ app.scss”;+进口“引导”;+进口bsCustomFileInput从“bs-custom-file-input”;/ /启动刺激应用程序导入”。/引导;++ bsCustomFileInput.init ();Symfob娱乐下载ony的形式系统支持引导本地与一个特殊的主题,使它:
配置/包/ twig.yaml
1 2
枝:form_themes:(“bootstrap_5_layout.html.twig”)样式的HTML
现在我们已经准备好风格应用程序。下载并扩大档案的根源项目:
1 2 3
美元php - r“复制(“https://syob娱乐下载mfony.com/uploads/assets/guestbook-5.4.zip”,“guestbook-5.4.zip”);“美元解压缩- o guestbook-5.4.zip美元rm guestbook-5.4.zip看一下模板,你可能会了解一二枝。
建立资产
使用Webpack时发生的一个重大变化是,CSS和javascript文件没有直接可用的应用程序。他们需要先“编译”。
在开发中,可以通过编译资产安可dev命令:
1
美元ob娱乐下载symfony运行纱线开发而不是每次执行命令有一个变化,将其发送到后台,让它看JS和CSS的变化:
1
美元ob娱乐下载symfony运行- d纱dev -手表花时间去发现视觉变化。看一看新的设计在浏览器中。
现在生成的登录表单样式以及制造商包使用默认引导CSS类:
生产平台。sh自动检测到您正在使用安可和编译的资产在构建阶段。
这项工作,包括代码示例,许可下Creative Commons BY-NC-SA 4.0许可证。
TOC
版本
版本:
地区:
