Question

我有流星js 1.8应用程序，我做了一个布局，为此布局我想添加CSS。我有这样的结构：

进口

-ui
--stylesheets
--bootstrap.min.css
--font-awesome.min.css
--skins.css
--forms.css

因此，我已将所有{cs}放在导入下的stylesheets文件夹中。现在，一个名为main_layout.html' and corresponding main_layout.js and main_layout.css的布局将这些文件放到以下位置：

-ui
--layouts
---dashboard
---main_layout.html
---main_layout.js
---main_layout.css

因此，我将所有导入内容都这样放在main_layout.css中：

@import '{}/imports/ui/stylesheets/bootstrap.min.css';
@import '{}/imports/ui/stylesheets/font-awesome.min.css';
@import '{}/imports/ui/stylesheets/skins.css';
@import '{}/imports/ui/stylesheets/forms.css';

然后我在main_layout.css中导入了main_layout.js：

import './main_layout.html'
import './main_layout.css'

我对流路由器有一个规则，可以呈现此布局：

import '../../ui/layouts/dashboard/main_layout'

FlowRouter.route('/', {
    name: 'App.home',
    action() {
    BlazeLayout.render('mainLayout', {main: ''});
    },
});

但是当我访问localhost：3000 /时，浏览器控制台出现错误：

未加载样式表http://localhost:3000/%7B%7D/imports/ui/stylesheets/bootstrap.min.css，因为其MIME类型“ text / html”不是“ text / css”。

其余的css文件依此类推。那我如何使用导入加载CSS？

Answer 1

欢迎您！

MIME类型错误消息仅是您的浏览器的症状，试图获取服务器未找到的CSS文件并返回HTML页面。对于Meteor应用程序，找不到的文件通常会替换为您的主页。

请参见Refused to apply style from '' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled

在您的特定情况下，您只需要意识到流星CSS包不会处理CSS中的@import：它会照原样复制到CSS规则中。因此，这就是您的浏览器所看到的，并且它请求指定的路径。一个简单的解决方法是，例如，将供应商CSS放置在项目public文件夹中，例如静态资产，然后继续导入它，但使用正确的路径，例如：

@import '/stylesheets/bootstrap.min.css';

（假设您将供应商文件放在public/stylesheets/bootstrap.min.css中）

您还有其他可能的解决方案，通常是通过像在输入CSS文件中一样在JS文件中引用它们来导入每个CSS文件，或者使用处理导入的其他样式编译包（例如流星sass）。

Answer 2

删除@并与一起使用。对于公共文件，如下所示：

  MSG = 'Avoid using `X.%<method>s` without providing a block.'

  def_node_matcher :x_method, '(send (const nil? :X) ${:some_method :another_method} ...)'

  def on_send(node)
      x_method(node) do |method_name|
        return if !method_name || first_child_of_block?(node)
        add_offense(node, location: :selector, message: format(MSG, method: method_name))
      end

    end

  private

    # checks if the given node's parent is a block, and the given node is its first child,
    # which would mean that the block is supplied to the given node (i.e `node { block }`)
    def first_child_of_block?(node)
      return false unless (parent = node.parent)
      return false unless parent.type == :block
      parent.children.first == node
    end

未加载css，因为其在Meteor JS中的MIME类型

2 个答案: