electron-vue项目中无法使用sass和自定义的全局变量

Question

electron-vue项目中无法使用sass和自定义的全局变量

1.项目配置：

• 安装：使用 vue init simulatedgreg/electron-vue 项目名 创建的electron-vue项目（github看了这个项目已经很久没维护了，奈何这个框架方便又集成了vue框架，所以最后还是使用了这种方式创建项目）
• 项目配置：
  

2.项目需求：

将一个成型的vuecli项目挪进一个electron-vue项目中，项目需要sass语法支持和全局jQuery变量

3.出现问题：

使用npm安装sass依赖并且在.electron/webpack.web.config.js中配置sass rule，基于对electron和webpack都不太了解，在.electron/webpack.renderer.config.js中也配置了rule，在vue文件内测试使用lang=scss后立即报红

4.做过的功课

1.sass依赖的问题

• GitHub上看了sass-loader的文档，使用dartsass只要安装npm i sass sass-loader --save-dev 即可; 使用nodesass需要安装npm i sass-loader node-sass --save-dev;两种方法都试了一遍，无果

• 也参考了网上的其他答案，一种声音认为sass安装版本问题，尝试下了低版本的，也尝试下了最新版本的，无果
• 再有就是认为npm 下载会漏下一些sass需要的包，所以也试过使用淘宝镜像，无果

2.sass的webpack配置问题
GitHub上也看了直接复制了sass的规则到.electron/webpack.renderer.config.js

// .electron/webpack.renderer.config.js
rules:[
      {
        test: /\.s[ac]ss$/i,
        use: [
          "style-loader",
          "vue-style-loader",
          "css-loader",
          {
            loader: "sass-loader",
            options: {
              // Prefer `dart-sass`
              implementation: require("sass"),
            },
          },
        ],
      },
      // 项目其他配置
 ]

定义全局的jQuery变量也是在.electron/webpack.renderer.config.js中配置不生效

  plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jquery: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery",
    })
  ],

麻烦走过路过的大佬们帮忙瞧一眼再解答一下

Answer 1

用scss吧。sass应该还有其他依赖
建议版本。亲测可行

Answer 2

这个试试，我的没有问题；另外建议尝试使用yarn，总感觉npm与cnpm有问题，还有在安装依赖的时候国内的网络环境也有一定影响

rules: [
      {
        test: /\.scss$/,
        use: ['vue-style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
      },
      {
        test: /\.sass$/,
        use: ['vue-style-loader', 'css-loader', 'postcss-loader', 'sass-loader?indentedSyntax']
      },
      {
        test: /\.less$/,
        use: ['vue-style-loader', 'css-loader', 'postcss-loader', 'less-loader']
      },
      {
        test: /\.css$/,
        use: ['vue-style-loader', 'css-loader', 'postcss-loader']
      },
      {
        test: /\.html$/,
        use: 'vue-html-loader'
      },
      {
        test: /\.js$/,
        use: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.node$/,
        use: 'node-loader'
      },
      // {
      //   test: /\.(css|scss)(\?.*)?$/,
      //   loader: 'style-loader!css-loader!postcss-loader!sass-loader'
      // },
      {
        test: /\.vue$/,
        use: {
          loader: 'vue-loader',
          options: {
            extractCSS: process.env.NODE_ENV === 'production',
            loaders: {
              sass: 'vue-style-loader!css-loader!postcss-loader!sass-loader?indentedSyntax=1!',
              scss: 'vue-style-loader!css-loader!postcss-loader!sass-loader',
              less: 'vue-style-loader!css-loader!postcss-loader!less-loader'
            }
          }
        }
      },
      
      {
        test: /\.(png|jpe?g|gif|svg|ico)(\?.*)?$/,
        use: {
          loader: 'url-loader',
          query: {
            limit: 10000,
            name: 'imgs/[name]--[folder].[ext]'
          }
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'media/[name]--[folder].[ext]'
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        use: {
          loader: 'url-loader',
          query: {
            limit: 10000,
            name: 'fonts/[name]--[folder].[ext]'
          }
        }
      }
    ]

这个是我的部分依赖版本

"dependencies": {
    "animate.css": "^3.7.2",
    "axios": "^0.18.1",
    "electron-log": "^4.1.0",
    "element-resize-detector": "^1.2.1",
    "element-ui": "^2.13.2",
    "nedb": "^1.8.0",
    "request": "^2.88.2",
    "save": "^2.4.0",
    "view-design": "^4.1.3",
    "vue": "^2.5.16",
    "vue-context-menu": "^2.0.6",
    "vue-cropper": "^0.5.2",
    "vue-electron": "^1.0.6",
    "vue-i18n": "^8.15.4",
    "vue-js-modal": "^2.0.0-rc.3",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1",
    "vuex-electron": "^1.0.0",
    ...
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-minify-webpack-plugin": "^0.3.1",
    "babel-plugin-component": "^1.1.1",
    "babel-plugin-import": "^1.13.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-stage-0": "^6.24.1",
    "babel-register": "^6.26.0",
    "copy-webpack-plugin": "^4.5.1",
    "cross-env": "^5.1.6",
    "css-loader": "^0.28.11",
    "devtron": "^1.4.0",
    "electron": "^8.0.3",
    "electron-builder": "^22.3.6",
    "electron-debug": "^3.0.1",
    "electron-devtools-installer": "^2.2.4",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "0.4.0",
    "multispinner": "^0.2.1",
    "node-loader": "^0.6.0",
    "node-sass": "^4.9.2",
    "postcss-loader": "^3.0.0",
    "postcss-plugin-px2rem": "^0.8.1",
    "postcss-px2rem": "^0.3.0",
    "sass-loader": "^7.0.3",
    "style-loader": "^0.21.0",
    "vue-loader": "^15.2.4",
    "vue-style-loader": "^4.1.0",
    "vue-template-compiler": "^2.5.16",
    "webpack": "^4.15.1",
    "webpack-cli": "^3.0.8",
    "webpack-dev-server": "^3.1.4",
    "webpack-hot-middleware": "^2.22.2",
    "webpack-merge": "^4.1.3"
    ...
  }