Question

我尝试在基于webpack的项目中使用Bulma，并且在使用样式时出错：

styles.scss：

    // ...
    public partial class MainPage : ContentPage
    {
        private List<Chunk> chunks = new List<Chunk>();

        // ...

        private void ContentPage_Appearing(object sender, EventArgs e)
        {
            StackLayout childLayout;

            foreach (Chunk chunk in chunks)
            {
                childLayout = new StackLayout();

                Image image = new Image() { Source = chunk.url, HorizontalOptions = LayoutOptions.Start };
                Label label = new Label() { Text = chunk.text, HorizontalOptions = LayoutOptions.Start };

                childLayout.Children.Add(image);
                childLayout.Children.Add(label);

                mainStackLayout.Children.Add(childLayout);
            }
        }
    }
    // ...

webpack.js：

@import "~bulma/sass/utilities/_all.sass";
@import '~bulma/sass/base/_all.sass';

.title {
  composes: title is-3 from 'bulma/sass/elements/title.sass';
}

错误是

            {
                test : /\.scss$/,
                use : [ {
                    loader : "style-loader",
                }, {
                    loader : "typings-for-css-modules-loader",
                    options : {
                        camelCase : true,
                        namedExport : true,
                        modules : true,
                        importLoaders : 2
                    }
                }, {
                    loader: "sass-loader",
                }]
            }

文件存在，请求的变量在

中定义

   Undefined variable: "$grey-darker".
   in C:\Users\XXXX\bulma-test\src\main\frontend\node_modules\bulma\sass\elements\title.sass (line 1, column 15)

如果我不自行导入变量，则从bulma

简单编译

@import "~bulma/sass/utilities/_all.sass";

而不是来自title.sass文件然后一切正常 - 期望我导入整个bulma样式，我试图通过标题创作来避免这种样式。

可以在此处找到Bulma文件：https://github.com/jgthms/bulma。这些是我的依赖：

  composes: title is-3 from 'bulma';

有谁知道为什么这个变量是未知的？

Thx，Stephan

SASS变量和'组合'：$ grey-darker not found

0 个答案: