如何在不同的文件中使用变量？

Question

假设我将较少的文件分成许多较少的文件以便于组织。 这是我的存储库：

/reset.less
/variables.less
/mixins.less
/main.less
/styles.less 

styles.less只是导入其他文件：

@import "reset.less";
@import "mixins.less";
@import "variables.less";
@import "main.less";

但是，当我在main.less中添加一些代码并使用在variables.less中定义的@ line-color。它显示名称Error: variable @line-color is undefined，我无法编译它 - 我使用PHPStorm少插件。

你能请求我吗？

Answer 1

您必须将变量导入所有使用变量的文件。

修改

你必须只编译你的style.less。你不能编译main.less，因为它不知道变量。但是你不需要main.CSS，不是吗？ 你应该得到正确的style.css，这是（我猜）你需要的唯一的css文件。

Answer 2

我可以通过在PHPstorm中执行以下操作来解决它：

• 打开首选项...
• 在工具＆gt;文件监视器＆gt;少（配置）
• 选中“仅跟踪根文件”
• 将“要刷新的输出路径”更改为../css/$FileNameWithoutExtension$.css（在前面添加“ ../ css / ” - 具体取决于您要将css文件写入的文件夹）
• （此时您可能想要检查这是否已经按照您的喜好完成了工作。如果没有，请继续下一步......）
• 在其他设置中＆gt; LESS Profiles＆gt; （您的个人资料）（配置）
• 定义“LESS源目录”：/Users/macuser/htdocs/MySite/sites/all/themes/mytheme/less（取决于哪个文件夹包含.less文件）
• 定义“按路径包含文件”：/Users/macuser/htdocs/MySite/sites/all/themes/mytheme/less/style.less（文件名取决于哪个.less文件编译其他.less文件）
• 通过选择要编写（缩小的）CSS文件的文件夹
来添加“CSS输出目录”
• 启用压缩CSS输出（如果需要）

注意：如果启用了压缩CSS输出，这意味着每次右键单击.less - 文件并点击“时，都会压缩代码”编译为CSS“。默认情况下，对.less - 文件所做的每次修改都不会压缩输出。如果你想立即压缩CSS，

• 使用以下命令安装 less-plugin-clean-css 终端：sudo npm install -g less-plugin-clean-css
• 接下来，转到工具＆gt;文件监视器＆gt;减去（配置），并将“参数”更改为--clean-css --no-color $FileName$（在前面添加“--clean-css”）。 现在它将在您编码时自动编译CSS。您将不再需要手动编译。