在Nette框架中使用Stylify CSS

Nette是一个在捷克共和国制造的PHP web框架，专注于快速和快速的web开发。

Nette框架默认不使用任何捆绑程序。因此你可以直接使用Stylify的Bundler或者通过Webpack、Rollup.js、Vite等使用Stylify。

如何将Stylify CSS集成到Nette框架中

在下面的例子中，我们将单独使用Bundler软件包。

首先，使用NPM或Yarn安装@stylify/bundler软件包：

npm i -D @stylify/bundler
yarn add -D @stylify/bundler

接下来，创建一个文件，例如，bundles.js：

const { Bundler } = require('@stylify/bundler');

const bundler = new Bundler({
	watchFiles: process.argv[process.argv.length - 1] === '--w',
	// 可选
	// 编译器配置信息 https://stylifycss.com/en/docs/stylify/compiler#configuration
	compiler: {
		// https://stylifycss.com/en/docs/stylify/compiler#variables
		variables: {},
		// https://stylifycss.com/en/docs/stylify/compiler#macros
		macros: {},
		// https://stylifycss.com/en/docs/stylify/compiler#components
		components: {},
		// ...
	}
});

bundler.bundle([{
	files: ['./app/Presenters/templates/**/*.latte'], outputFile: './www/static/css/index.css'
}]);

最后一步是在package.json中添加脚本：

"scripts": {
	"build": "node bundles.js",
	"watch": "node bundles.js --w"
}

现在你可以在@layout.latte中添加一个生成CSS的链接：

<link rel="stylesheet" href="/static/css/index.css">

你可以随心所欲地定制上面的构建。

＃＃＃交换条件

如果你在Nette的类属性中使用了像下面这样的自定义选择器，你可能需要把它包在n:class="''"中。这是因为Nette将自定义选择器作为宏来匹配。单引号可以防止这种情况。

<div n:class="'[div]{width:240px}'"></div>
<div n:class="'md:{width:320px}'"></div>