记一次 webpack.config.js 的 scss 加载问题的解决方案以及事情分析

Posted 2021-03-11

在迁移 vue-element-admin 到 electron-vue-serialport 的时候，进行了一次有趣的分析。

报错如下

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

一开始没有细看，以为是大众常见问题，但后来仔细分析了一下，它其实就是要你把 scss 文件添加到工程下。

那么怎么做呢？

搜索两边的工程发现 vue-element-admin 没有相关代码，然后看了一下 webpack.config.js 的加载情况，可以发现有如下配置

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

可以看到它并没有匹配 scss 的样式文件，那么我简单修改一下正则。

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

but 失败，看来不是这样操作的。

于是搜索过程中注意到 scss 是有 sass-loader 的，所以修改成如下。

      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\']
        })
      },
      ...

于是解决，相关的配置细节看这个内容 https://www.cnblogs.com/songxia/p/10295830.html 。

重点不在于如何去修改，而是分析并解决问题的过程，如何解决问题才是我们需要学习的。