Question

下午好，

我很难在HTMLEditor vue组件的范围内确定导入的CSS文件的范围。

以下是组件：

<template>
    <div class="htmleditor">
        <div class="htmleditor-input">
            <h3>Header</h3>
            <p>Paragraph of text</p>
        </div>
        <div class="htmleditor-output">

        </div>
    </div>
</template>

<script>
    export default
    {
        data: () =>
        ({
            html: ''
        }),
    }
</script>

<style scoped src="~/css/default.min.css">
    .htmleditor
    {
        display: flex;
    }

    .htmleditor-input
    {
        border: 1px solid green;
    }

    .htmleditor-output
    {
        border: 1px solid yellow;
    }
</style>

我遇到的问题是，如果我这样做，它会说

未找到模块：错误：无法解析'〜/ css / default.min.css'

如果我尝试将@import'〜/ css / default.min.css'放入CSS的.htmleditor中，那么我得到的只是一种无范围的样式。

Answer 1

我找到了解决方法。如果您遇到相同的错误-请知道nodejs的vue编译器需要某种“绝对”文件路径。

您不能使用'〜/'或'/'或'。作为您路径中的第一件事，您必须直接导航-在我的情况下（Laravel）意味着放置：“ ../../../../ css / default.min.css”。

vue.js中的范围样式根本没有范围

1 个答案: