导致错误的样式表的Bigcommerce Stencil顺序

时间：2016-05-22 01:14:53

标签： node.js sass bigcommerce node-sass

我知道这几乎是不可能回答的，因为我无法在干净安装默认的Stencil主题时可靠地重现问题，但是我已经花了好几个小时试图理解什么是＆＃39;继续我希望有人可以提出任何可能导致问题的想法，以便我可以尝试从不同角度进行调查。

以下是我的主assets/scss/theme.scss文件的完整内容：

// Foundation CSS Framework
@import 'settings';
@import '../../node_modules/foundation-sites/scss/foundation';
@include foundation-everything;

// Custom Settings
@import 'customSettings';

// Libraries
@import '../../node_modules/magnific-popup/src/css/main';
@import '../../node_modules/slick-carousel/slick/slick';

// Custom Mixins
@import 'mixins';

// Utilities
@import 'utilities/utilities';

// Layouts
@import 'layouts/html';
@import 'layouts/header';
@import 'layouts/body';
@import 'layouts/footer';
@import 'layouts/home';
@import 'layouts/container';
@import 'layouts/category';
@import 'layouts/product';
@import 'layouts/cart';

// Components
@import 'components/type';
@import 'components/button';
@import 'components/panel';
@import 'components/callout';
@import 'components/carousel';
@import 'components/scrollTop';
@import 'components/modal';
@import 'components/topBanner';
@import 'components/mainNav';
@import 'components/headerInfo';
@import 'components/helpDropdown';
@import 'components/pageHeading';
@import 'components/icons';
@import 'components/breadcrumbs';
@import 'components/categoryImages';
@import 'components/rating';
@import 'components/productPrice';
@import 'components/productCard';
@import 'components/productGrid';
@import 'components/socialLinks';
@import 'components/referralProgram';
@import 'components/homeReviews';
@import 'components/homeCopy';
@import 'components/categorySort';
@import 'components/sidebarBlock';
@import 'components/pagination';
@import 'components/productHeader';
@import 'components/productHeaderBullets';
@import 'components/productOption';
@import 'components/productContentPreviewBox';
@import 'components/productMenubar';
@import 'components/productSubsection';
@import 'components/productDetails';
@import 'components/productFaqs';
@import 'components/productVideos';
@import 'components/productReviews';
@import 'components/scrollTop';
@import 'components/cart';
@import 'components/cartHeader';
@import 'components/cartButtons';
@import 'components/shippingEstimator';
@import 'components/cartCallouts';
@import 'components/cartProductSection';
@import 'components/loadingOverlay';
@import 'components/page';

此文件包含在template/layout/base.html文件的头部中，如下所示：

{{{stylesheet '/assets/css/theme.css'}}}

当我加载我的网站时，一切都按预期工作。模板服务器在http://localhost:3000/stencil/theme/1/css/theme.css将其编译为css后，页面正确加载样式表。

接下来，我创建另一个名为assets/scss/testing.scss的scss文件。以下是该文件的完整内容：

@import 'settings';

.page-content {

  .formContainer {
    background-color: $light-gray;
    border: 1px solid $dark-gray;
    padding: 1rem;
    max-width:500px;
    margin:0 auto;
    margin-top:40px;
  }

  button {
    width: 100%;
    margin-bottom: 0;
  }
}

然后我在theme.css的调用下将此文件包含在主要布局的头部，如下所示：

{{{stylesheet '/assets/css/theme.css'}}}
{{{stylesheet '/assets/css/testing.css'}}}

现在，当我刷新页面时，我看到以下两个问题：

1）模板cli命令行输出以下错误：

{ [Error: ../../node_modules/foundation-sites/scss/foundation.scss doesn't exist!]
  formatted: 'Error: ../../node_modules/foundation-sites/scss/foundation.scss doesn\'t exist!\n        on line 3 of stdin\n>> @import \'../../node_modules/foundation-sites/scss/foundation\';\n   --------^\n',
  message: '../../node_modules/foundation-sites/scss/foundation.scss doesn\'t exist!',
  column: 9,
  line: 3,
  file: 'stdin',
  status: 1 }

2）尝试加载theme.css文件时，浏览器出错。状态为422 Unprocessable Entity。但是，如果我将浏览器直接导航到http://localhost:3000/stencil/theme/1/css/theme.css，那么css文件就在那里，并且看起来已经正确编译。

现在，如果我在布局文件中切换样式表调用的顺序，就像这样，一切都正确加载：

{{{stylesheet '/assets/css/testing.css'}}}
{{{stylesheet '/assets/css/theme.css'}}}

错误完全消失，无论我刷新页面多少次，都不会显示错误。只要我切换回原始订单并刷新页面，错误就会再次出现。

更奇怪的是，似乎命令行错误始终引用@import中theme.scss中testing.scss中不存在的theme.scss语句。例如，如果我现在要将testing.scss中的第二行添加到theme.scss，则错误将更改为现在引用testing.scss中的第三个导入。换句话说，如果我将@import 'settings'; @import '../../node_modules/foundation-sites/scss/foundation'; 顶部的导入更改为：

{ [Error: customSettings.scss doesn't exist!]
  formatted: 'Error: customSettings.scss doesn\'t exist!\n        on line 7 of stdin\n>> @import \'customSettings\';\n   --------^\n',
  message: 'customSettings.scss doesn\'t exist!',
  column: 9,
  line: 7,
  file: 'stdin',
  status: 1 }

命令行错误现在显示为：

customSettings

如果我将@import 'settings'; @import '../../node_modules/foundation-sites/scss/foundation'; @import 'customSettings'; { [Error: ../../node_modules/magnific-popup/src/css/main.scss doesn't exist!] formatted: 'Error: ../../node_modules/magnific-popup/src/css/main.scss doesn\'t exist!\n on line 10 of stdin\n>> @import \'../../node_modules/magnific-popup/src/css/main\';\n --------^\n', message: '../../node_modules/magnific-popup/src/css/main.scss doesn\'t exist!', column: 9, line: 10, file: 'stdin', status: 1 } 添加到导入列表，则错误将移至下一个错误：

theme.css

这种模式一直沿着列表向下延伸，直到我在testing.css中包含testing.css的所有导入内容。那时，错误消失了。如果在整个过程中的任何时候我更改了布局中样式表的顺序，以便theme.scss出现在{{1}}之前，错误也会消失。

更糟糕的是，这种行为并非100％一致。它始终是最的时间，但是有一些随机的时间我重新启动服务器或刷新页面一段时间没有刷新它，并且工作正常，但是一旦我再次刷新，错误又回来了。

对我而言，这感觉就像模板服务器的某种问题，以及缓存数据或类似的东西。正如我所说，我无法在全新安装的默认模板主题上重现它，所以我意识到这基本上不可能获得帮助，但此时我不知道还有什么地方可以转。< / p>

有什么想法吗？

1 个答案:

答案 0 :(得分：0)

我知道这是一个古老的问题，但是如果有人落在这里寻求修复... 我们的BigCommerce主题偶尔会遇到相同的问题，并且今天在stencil-cli软件包中添加了一个修复程序来解决该问题。

问题：https://github.com/bigcommerce/stencil-cli/issues/404 提交：https://github.com/bigcommerce/stencil-cli/pull/436

如果您将stencil-cli更新为> = v1.15.5，则该问题应得到解决。

为提交而贷记https://github.com/2ps。

相关问题
最新问题