javascript - 如何导入@material/theme 和@material/textfield 样式来创建自己的主题包

Question

我正在尝试创建一个自定义@material/theme包，其中包含自定义颜色和仅使用的组件（@material/textfield/mdc-text-field在此示例中），遵循此文档

@mycorp/scss

变量.scss

$primary-color: #ff742a;
$secondary-color: #ffd42a;
$text-color: #383838;
$background-color: #F6F6F6;

材料.scss

@import './variables.scss';

// Update Theme
@use "@material/theme" with (
  $primary: $primary-color,
  $secondary: $secondary-color,
  $background: $background-color,
);

// Import only Text Field
@use '@material/textfield/mdc-text-field';

索引.scss

@import './variables.scss';
@import './material.scss';

项目

我正在使用 React 和 Webkit + Babel 来运行项目，并安装@rmwc/textfield了生成 HTML。

我app.scss通过导入包的索引来导入我的样式：

@import "@mycorps/scss/src/index.scss";

我知道其他一切工作正常（变量，..），但没有 Material Design 风格。

再试一次

我还尝试替换@use为@import以“编写”文本字段主题（我猜？）但是当我尝试构建它时出现错误：

ERROR in ./src/style/app.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src??ref--6-2!./node_modules/sass-loader/dist/cjs.js??ref--6-3!./src/style/app.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "@include mixins": expected 1 selector or at-rule, was ".core-styles;"
        on line 30 of ../../../dev/mycorps/packages/mycorps-scss/node_modules/@material/textfield/mdc-text-field.scss
        [...]
>> @include mixins.core-styles;

   ---------^

 @ ./src/style/app.scss 2:26-201
 @ ./src/index.js

当我尝试两种解决方案都没有结果时，结果相同：

• https://github.com/material-components/material-components-web/issues/351#issuecomment-298796798
• https://github.com/webpack-contrib/sass-loader/issues/804#issuecomment-586095020

标签： javascriptwebpacksassmaterial-design

Answer 1

更新 ！！像往常一样安装时，此答案不起作用..仅在与npm link.

好的..我在多次尝试后弄清楚了。

我必须同时拥有node-sass并sass添加implementation: require('sass'),到webpack.config.js：

  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: 'postcss-loader',
            options: {
              plugins: () => [autoprefixer()]
            }
          },
          { loader: 'sass-loader',
            options: {
              sassOptions: {
                // mdc-web doesn't use sass-loader's normal syntax for imports
                // across modules, so we add all module directories containing
                // mdc-web components to the Sass include path
                // https://github.com/material-components/material-components-web/issues/351
                includePaths: glob.sync(
                  path.join(__dirname, '**/node_modules/@material')
                ).map((dir) => path.dirname(dir)),
              },
              implementation: require('sass'),
              webpackImporter: false,
            }
          },
        ],
      },
    ],
  }

我还更新了material.scss文件：

@use '../variables.scss';

// Update Theme
@use "@material/theme" with (
  $primary: $primary-color,
  $secondary: $secondary-color,
  $background: $background-color,
);

// Import only Text Field
@import '@material/textfield/mdc-text-field';