PhpStorm：在源 LESS 下分组/嵌套 *.map 文件（以及 *.css 文件）

Question

目前，当配置文件观察器时，PhpStorm 将生成的

*.css

文件嵌套在

*.less

文件下。

有什么方法可以获取那里的

*.map

文件吗？

示例：

它是

less.jar > plugin.xml

文件中的这些设置之一吗？

<idea-plugin version="2">
  <name>LESS support</name>
  <id>org.jetbrains.plugins.less</id>
  <category>HTML/JavaScript Development</category>
  <vendor>JetBrains</vendor>
  <description>
      <![CDATA[
      This plugin supports <a href="http://lesscss.org/">LESS</a> dialect of CSS that extends it with dynamic behavior such as variables, mixins, operators and functions.
      The following features are available:
        <ul>
        <li>Dedicated file type.</li>
        <li>LESS page under the Code Style node of the Settings/Preferences dialog.</li>
        <li>Syntax and error highlighting.</li>
        <li>Code formatting and folding.</li>
        <li>Code completion.</li>
        </ul>
      ]]>
   </description>
  <depends>com.intellij.css</depends>
  <depends>com.intellij.modules.lang</depends>
  <depends optional="true" config-file="less-watcher.xml">com.intellij.plugins.watcher</depends>
  <depends optional="true" config-file="less-copyright.xml">com.intellij.copyright</depends>

  <extensions defaultExtensionNs="com.intellij">
    <completion.contributor language="CSS" implementationClass="org.jetbrains.plugins.less.completion.LessCompletionContributor"/>
    <completion.contributor language="CSS" implementationClass="org.jetbrains.plugins.less.completion.LessDumbAwareCompletionContributor"/>
    <lang.implementationTextSelectioner language="LESS" implementationClass="com.intellij.psi.css.CSSImplementationTextSelectioner"/>
    <css.structureViewChildrenProvider implementation="org.jetbrains.plugins.less.fileStructure.LessStructureViewElementsProvider"/>

    <errorHandler implementation="com.intellij.diagnostic.ITNReporter"/>
    <lang.braceMatcher language="LESS" implementationClass="org.jetbrains.plugins.less.editor.LessBraceMatcher"/>
    <typedHandler implementation="org.jetbrains.plugins.less.editor.LessBraceInterpolationTypedHandler" id="lessInterpolationTypedHandler"/>
    <typedHandler implementation="org.jetbrains.plugins.less.editor.LessTypedHandler"/>
    <gotoSymbolContributor implementation="org.jetbrains.plugins.less.LessGotoSymbolContributor"/>
    <annotator language="LESS" implementationClass="org.jetbrains.plugins.less.annotator.LessColorAnnotator"/>
    <fileTypeFactory implementation="org.jetbrains.plugins.less.LESSFileTypeFactory"/>
    <lang.parserDefinition language="LESS" implementationClass="org.jetbrains.plugins.less.parser.LESSParserDefinition"/>
    <lang.syntaxHighlighterFactory language="LESS" implementationClass="org.jetbrains.plugins.less.highlighting.LessSyntaxHighlighterFactory"/>
    <lang.ast.factory language="LESS" implementationClass="org.jetbrains.plugins.less.psi.impl.LESSTreeElementFactory"/>
    <lang.commenter language="LESS" implementationClass="org.jetbrains.plugins.less.LESSCommenter"/>
    <psi.referenceContributor implementation="org.jetbrains.plugins.less.references.LESSReferenceContributor"/>
    <lang.findUsagesProvider language="LESS" implementationClass="org.jetbrains.plugins.less.usages.LESSFindUsagesProvider"/>
    <renameInputValidator implementation="org.jetbrains.plugins.less.rename.LESSRenameInputValidator"/>
    <extendWordSelectionHandler implementation="org.jetbrains.plugins.less.editor.LessExtendWordSelectionHandler"/>
    <colorSettingsPage implementation="org.jetbrains.plugins.less.highlighting.LESSColorsPage"/>
    <lang.braceMatcher language="LESS" implementationClass="com.intellij.psi.css.impl.util.editor.CssBraceMatcher"/>
    <lang.foldingBuilder language="LESS" implementationClass="com.intellij.psi.css.impl.util.editor.CssFoldingBuilder"/>
    <codeInsight.parameterInfo language="LESS" implementationClass="com.intellij.psi.css.parameterinfo.CssParameterInfoHandler"/>
    <enterHandlerDelegate implementation="org.jetbrains.plugins.less.editor.LESSEnterHandler" order="after EnterBetweenBracesHandler"/>
    <quoteHandler fileType="LESS" className="com.intellij.psi.css.impl.util.editor.CssQuoteHandler"/>
    <css.elementDescriptorProvider implementation="org.jetbrains.plugins.less.descriptors.LessElementDescriptorProvider" 
                                   order="last, before cssElementDescriptorProvider"/>
    <codeStyleSettingsProvider implementation="org.jetbrains.plugins.less.settings.LESSCodeStyleSettingsProvider"/>
    <langCodeStyleSettingsProvider implementation="org.jetbrains.plugins.less.settings.LESSLanguageCodeStyleSettingsProvider"/>
    <lang.formatter language="LESS" implementationClass="org.jetbrains.plugins.less.formatter.LessFormattingModelBuilder"/>
    <spellchecker.support language="LESS" implementationClass="org.jetbrains.plugins.less.spellchecking.LessSpellcheckingStrategy"/>
    <spellchecker.bundledDictionaryProvider implementation="org.jetbrains.plugins.less.spellchecking.LessBundledDictionaryProvider"/>
    <usageTypeProvider implementation="org.jetbrains.plugins.less.usages.LessUsageTypeProvider"/>
    <problemFileHighlightFilter implementation="org.jetbrains.plugins.less.highlighting.LessProblemFileHighlightFilter"/>
    <breadcrumbsInfoProvider implementation="org.jetbrains.plugins.less.editor.LessBreadcrumbsInfoProvider"/>
    <previewHintProvider implementation="org.jetbrains.plugins.less.editor.LessPreviewHintProvider"/>
    <embeddedTokenTypesProvider implementation="org.jetbrains.plugins.less.LessTokenTypesProvider"/>
    <include.provider implementation="org.jetbrains.plugins.less.include.LessFileIncludeProvider"/>
    <internalFileTemplate name="Less File"/>

    <stubIndex implementation="org.jetbrains.plugins.less.psi.stubs.LessMixinIndex"/>
    <stubIndex implementation="org.jetbrains.plugins.less.psi.stubs.LessVariableIndex"/>
    <stubElementTypeHolder class="org.jetbrains.plugins.less.LESSElementTypes"/>

    <lang.inspectionSuppressor language="LESS" implementationClass="org.jetbrains.plugins.less.inspections.suppress.LessInspectionSuppressor"/>
    <annotator language="LESS" implementationClass="org.jetbrains.plugins.less.annotator.LessErrorsAnnotator"/>
    <annotator language="CSS" implementationClass="org.jetbrains.plugins.less.annotator.LessErrorsAnnotator"/>
    <localInspection language="LESS" bundle="org.jetbrains.plugins.less.LESSBundle"
                     key="inspections.unresolved.variable.name"
                     groupKey="inspections.group.name" enabledByDefault="true" level="WARNING"
                     implementationClass="org.jetbrains.plugins.less.inspections.LessUnresolvedVariableInspection"/>
    <localInspection language="LESS" bundle="org.jetbrains.plugins.less.LESSBundle"
                     key="inspections.unresolved.mixin.name"
                     groupKey="inspections.group.name" enabledByDefault="true" level="WARNING"
                     implementationClass="org.jetbrains.plugins.less.inspections.LessUnresolvedMixinInspection"/>
    <localInspection language="LESS" bundle="org.jetbrains.plugins.less.LESSBundle"
                     key="inspections.resolved.without.imports.name"
                     groupKey="inspections.group.name" enabledByDefault="true" level="WEAK WARNING"
                     implementationClass="org.jetbrains.plugins.less.inspections.LessResolvedByNameOnlyInspection"/>
  </extensions>

  <extensions defaultExtensionNs="com.intellij.css">
    <supportedFileTypesProvider implementation="org.jetbrains.plugins.less.index.LessSupportedFileTypesProvider"/>
    <cssInspectionFilter language="LESS" implementationClass="org.jetbrains.plugins.less.inspections.LessCssInspectionFilter"/>
  </extensions>
</idea-plugin>

Answer 1

不，它与 LESS 插件描述符无关。是的，当然这是可能的。您所需要做的就是确保在文件观察器的“

.map

”字段中指定了

Output paths to refresh

文件的模式。喜欢

$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.map

Answer 2

根据我的经验，Iena 建议的配置无法正常工作，为了生成文件 .map，我以这种方式配置了文件观察器的设置：

论据：

--no-color $FileName$ 
--source map=$FileNameWithoutExtension$.css.map  
-source-map-url=$FileNameWithoutExtension$.css.map 

刷新的输出路径：

$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map

地图文件名以这种方式包含 .css 路径很重要：

filename.css.map

--source-map=filename 命令生成 .map 文件并 -source-map-url=filename 将其链接到生成的 css 文件中。

这是我的文件观察器的配置：

希望对你有用。

好代码

D.

Answer 3

快速解决方案：在参数中使用标志

--source-map-less-inline --source-map-map-inline

它将把地图存储在CSS文件中

但是更好的解决方案使用 grunt/gulp 构建器...

Answer 4

另一种简单的方法（by Jetbrains.com）

1. 使用 [Alt + 1] 打开项目工具窗口，然后单击 ⋮ > 文件 筑巢

2. 启用“显示与嵌套同名的文件”

3. 单击+按钮添加新规则并插入父后缀和子后缀

4. 点击“确定”

之前：

之后：