Solution scss loaded question in mind and what the analysis of a webpack.config.js

When migrating vue-element-admin to electron-vue-serialport found an interesting analysis.

Given as follows

ERROR in ./src/renderer/styles/variables.scss
    Module parse failed: Unexpected character '#' (2:6)    
    You may need an appropriate loader to handle this file 
type.
    | // base color
    | $blue:#324157;
    | $light-blue:#3A71A8;
    | $red:#C03639;
     @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/renderer/views/layout/components/Sidebar/index.vue 7:0-49
     @ ./src/renderer/views/layout/components/Sidebar/index.vue
     @ ./src/renderer/views/layout/components/index.js     
     @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/renderer/views/layout/index.vue
     @ ./src/renderer/views/layout/index.vue
     @ ./src/renderer/router/index.js
     @ ./src/renderer/main.js

Initially it did not look, thought it was a public common problem, but then a careful analysis of what it really comes down to scss you add files to the project.

So how to do it?

Search on both sides of the project found vue-element-admin No code, and then looked at the situation webpack.config.js load can be found in the following configuration

      ...
      {
        test: /\.(css)$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader'
        })
      },
      ...

You can see it does not match scss style files, then I simply change it regular.

      const ExtractTextPlugin = require('extract-text-webpack-plugin')
      ...
      {
        test: /\.(css|scss)$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader'
        })
      },
      ...

but failure does not appear this operation.

So the search is noted during scss sass-loader, so modified as follows.

      const ExtractTextPlugin = require('extract-text-webpack-plugin')
      ...
      {
        test: /\.(css)$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader'
        })
      },
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use: ['css-loader', 'sass-loader']
        })
      },
      ...

So to solve the relevant configuration details to see this content https://www.cnblogs.com/songxia/p/10295830.html.

The focus is not on how to modify, but the analysis process and solve problems, how to solve the problem is we need to learn.