Как настроить `direflow-webpack.js` для поддержки файлов` sass`

Question

Я использую веб-компоненты , но без поддержки sass.

есть этот файл direflow-webpack.js, который я могу переопределить в обычном webpack и добавить свои правила.

Проблемы:

---

• Внутри файла компонента он не может найти модуль s css. import styles from '../../sass/main.scss';.

• Приложение использует typescript, а также процессы build и run не дают ошибок.

• Вот как я используется для добавления sass на webpack.config, на моих предыдущих проектах:

{
            test: /\.css$/,
            use: [
              require.resolve('style-loader'),
              {
                loader: require.resolve('css-loader'),
                options: {
                  importLoaders: 1,
                },
              },
              {
                loader: require.resolve('postcss-loader'),
                options: {
                  // Necessary for external CSS imports to work
                  // https://github.com/facebookincubator/create-react-app/issues/2677
                  ident: 'postcss',
                  plugins: () => [
                    require('postcss-flexbugs-fixes'),
                    autoprefixer({
                      browsers: [
                        '>1%',
                        'last 4 versions',
                        'Firefox ESR',
                        'not ie < 9', // React doesn't support IE8 anyway
                      ],
                      flexbox: 'no-2009',
                    }),
                  ],
                },
              },
            ],
          },
          //add sass loader for .scss files
          {
            test: /\.scss$/,
            use: [{
                loader: "style-loader" // creates style nodes from JS strings
            }, {
                loader: "css-loader" // translates CSS into CommonJS
            }, {
                loader: "sass-loader" // compiles Sass to CSS
            },{
                loader: "postcss-loader"
            }]
          },

---

• Это мой текущий простой direflow-webpack.js, который я добавил новые правила для sass (я не уверен, что это правильно):

module.exports = (config, env) => ({
  ...webpackConfig(config, env, {
    filename: 'bundle.js',
  },
  {
    test: /\.css$/,
    use: [
      require.resolve('style-loader'),
      {
        loader: require.resolve('css-loader'),
        options: {
          importLoaders: 1,
        },
      },
      {
        loader: require.resolve('postcss-loader'),
        options: {
          // Necessary for external CSS imports to work
          // https://github.com/facebookincubator/create-react-app/issues/2677
          ident: 'postcss',
          plugins: () => [
            require('postcss-flexbugs-fixes'),
            autoprefixer({
              browsers: [
                '>1%',
                'last 4 versions',
                'Firefox ESR',
                'not ie < 9', // React doesn't support IE8 anyway
              ],
              flexbox: 'no-2009',
            }),
          ],
        },
      },
    ],
  },
  //add sass loader for .scss files
  {
    test: /\.scss$/,
    use: [{
        loader: "style-loader" // creates style nodes from JS strings
    }, {
        loader: "css-loader" // translates CSS into CommonJS
    }, {
        loader: "sass-loader" // compiles Sass to CSS
    },{
        loader: "postcss-loader"
    }]
  }),

});

---

Я не получаю никакой ошибки в консоли, она строит и запускает без ошибок.

Но внутри файла компонента он не может найти модуль s css.

import styles from '../../sass/main.scss';

Должен ли я также выполнить какие-либо настройки в tsconfig.json?

Answer 1

Итак, direflow поддерживает scss файлы готовые.

Нам просто нужно объявить scss внутри global react-app-env.d.ts, вот так:

 declare module '*.scss' {
   export default style as string
  }

  declare module '*.css' {
    export default style as string
  }

  declare module '*.sass' {
    export default style as string
  }

---

Нам больше ничего не нужно делать, достаточно просто импортировать файлы s css в компонент и передать его в компонент Styled:

Существует два способы использования s css (я упрощаю структуру компонентов):

1-й способ с withStyles Ho C:

import React from 'react';
import { withStyles } from 'direflow-component';
import styles from './styles/main.scss


const MyComponent = () => {
 return (
    <div>
      <button>press me</button
    <div> 
}


export default withStyles(styles)(MyComponent);

---

2-й способ с styled компонентом:

`import React from 'react';
 import { Styled } from 'direflow-component';

 import MyButton from '...';
 import styles from './styles/main.scss

 const MyComponent = () => {
   return (
      <Styled styles={styles}>. {/* next line MUST be a dom el.*/}
        <div>
          <MyButton>press me</MyButton> {/* MyButton cant be immediate child of <Styled /> */}
        <div> 
      </Styled>
  }

 `

Вы также можете прочитать документацию: https://direflow.io/styling