ShakaCode | ShakaCode Blog | Rails On Maui Blog | Rails | ReactJs | JavaScript | Webpack | Productivity |

Error on compiling sass file


#1

I added layout.scss file but I got this error
21:33:19 client.1 | ERROR in ./app/bundles/happen/layout/Layout.scss
21:33:19 client.1 | Module parse failed: /Users/amir/source/happen/client/app/bundles/happen/layout/Layout.scss Unexpected token (2:0)
21:33:19 client.1 | You may need an appropriate loader to handle this file type.
21:33:19 client.1 | | // This way we turn CSS Modules off and apply these css rules globaly


#2

@Amir_Hosein_Bidva

With this description, there no chance of getting any meaningful help.

Would you be interested in our Coaching Plan?

If so, please schedule a complimentary 30-minute consultation:
https://calendly.com/justingordon

Thanks,

Justin


#3

yes I’m very interested to your coaching plan but the problem is it’s too expensive and and I’m using react on rails to learn technology. There is not commercial goal behind it so I just defined a very simple project with react on rails and react router to learn the concept but now I find this very complicated , I know ruby on rails and react but here both together it’s very complicated and there isn’t documentation on how to make configuration on react router and react on rails.
I’m using your react-webpack-rails-tutorial sample and struggling to bring everything up and running. to learn it more.
thanks if you had free curses on these things let me know


#4

I put the fix here for someone has same problem. it fixed by adding the module on

webpack.config.js
    {
            test: /\.scss$/,
            use: [
              'style-loader',
              {
                loader: 'css-loader',
                options: {
                  modules: true,
                  importLoaders: 3,
                  localIdentName: '[name]__[local]__[hash:base64:5]',
                }
              },
              {
                loader: 'postcss-loader',
                options: {
                  plugins: 'autoprefixer'
                }
              },
              {
                loader: 'sass-loader'
              },
              {
                loader: 'sass-resources-loader',
                options: {
                  resources: './app/assets/styles/app-variables.scss'
                },
              }
            ],
          }