How to configure `direflow-webpack.js` so as to support `sass` files

user_3221094 0
Viewed 977

I m using webcomponents but without sass support.

there is this file direflow-webpack.js that i can override the normal webpack and add my rules.

Problems:

  • Inside the component file, it cant find the scss module. import styles from '../../sass/main.scss';.

  • The application is using typescript and also the build and run process gives no errors.

  • This is how i used to add sass, on a webpack.config, on my previous projects:

{
            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"
            }]
          },
  • This is my current simple direflow-webpack.js, which i added the new rules for the sass (i m not sure if it is correct):
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"
    }]
  }),

});

I dont get any error in the console, it builds & run without error.

But inside the component file, it cant find the scss module.

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

Should i do any configuration in the tsconfig.json as well ?

webpack typescript ecmascript-6 javascript
1 Answers

So direflow supports scss files are out-of-the-box.

We just need to declare the scss inside global react-app-env.d.ts, like so:

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

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

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

We don’t need to do anything else, just simply import the scss files in the component, and pass it to the Styled component:

There are two ways to use scss(i simplify the components structure):

1st way with 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);

2nd way with styled component:

`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>
  }

 `

You can read the documentation as well: https://direflow.io/styling

user_32210940
Related