如何配置 `direflow-webpack.js` 以支持 `sass` 文件

Question

我正在使用 webcomponents，但没有 sass 支持。

有这个文件direflow-webpack.js 我可以覆盖普通的webpack 并添加我的规则。

问题：

---

• 在组件文件中，找不到scss模块。 import styles from '../../sass/main.scss';。

• 应用程序正在使用typescript，并且build 和run 进程没有出现错误。

• 这就是我以前在 webpack.config 上添加 sass 的方式，在我以前的项目中：

{
            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"
    }]
  }),

});

---

我在控制台中没有收到任何错误，它构建和运行没有错误。

但是在组件文件里面，找不到scss模块。

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

我是否也应该在 tsconfig.json 中进行任何配置？

Answer 1

所以direflow 支持scss 文件是开箱即用的。

我们只需要在全局react-app-env.d.ts 中声明scss，如下所示：

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

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

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

---

我们不需要做任何其他事情，只需在组件中导入 scss 文件，并将其传递给 Styled 组件即可：

scss有两种使用方式（我简化了组件结构）：

withStyles HoC 的第一种方式：

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);

---

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