带有 SASS 的 Webpack-simple + vue-cli - 无法编译？

Posted 2023-02-21

【中文标题】带有 SASS 的 Webpack-simple + vue-cli - 无法编译？

【英文标题】：Webpack-simple + vue-cli with SASS - Can't compile?

【发布时间】：2018-07-07 12:59:10

【问题描述】：

我使用默认 CLI 设置使用 vue-cli 和 webpack-simple 设置了一个简单项目，并确保在询问我是否要使用 SASS 时选择了“Y”。

一、文件夹结构图：

我在./src/scss 目录中创建了一个main.scss 文件，然后 在文件中添加了以下简单的 scss 语法：

$primary-color: rgb(173, 16, 16);

然后，在我的 App.vue 模板中，我有这样的：

<style lang="scss" scoped>

h1, h2 
  font-weight: normal;
  color: $primary-color;


</style>

在我的 ma​​in.js 文件中，我确保导入 main.scss 文件，例如 所以：

import './scss/main.scss'

运行npm run dev时，出现以下编译错误：

编译失败。

./node_modules/css-loader!./node_modules/vue-loader/lib/style-compiler?"vue":true,"id":"data-v-04c2046b","scoped":true,"hasInlineConfig":false!./node_modules/sass-loader/lib/loader.js!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue
Module build failed: 
undefined
        ^
      Undefined variable: "$primary-color".



    in D:\Users\medranns\Desktop\sasswebpack\src\App.vue (line 46, column 10)
 @ ./node_modules/vue-style-loader!./node_modules/css-loader!./node_modules/vue-loader/lib/style-compiler?"vue":true,"id":"data-v-04c2046b","scoped":true,"hasInlineConfig":false!./node_modules/sass-loader/lib/loader.js!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue 4:14-316 13:3-17:5 14:22-324
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

这是我的 webpack.config.js 文件的样子：

var path = require('path')
var webpack = require('webpack')

module.exports = 
  entry: './src/main.js',
  output: 
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  ,
  module: 
    rules: [
      
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ],
      ,
      
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader'
        ],
      ,
      
        test: /\.sass$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader?indentedSyntax'
        ],
      ,
      
        test: /\.vue$/,
        loader: 'vue-loader',
        options: 
          loaders: 
            // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
            // the "scss" and "sass" values for the lang attribute to the right configs here.
            // other preprocessors should work out of the box, no loader config like this necessary.
            'scss': [
              'vue-style-loader',
              'css-loader',
              'sass-loader'
            ],
            'sass': [
              'vue-style-loader',
              'css-loader',
              'sass-loader?indentedSyntax'
            ]
          
          // other vue-loader options go here
        
      ,
      
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      ,
      
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: 
          name: '[name].[ext]?[hash]'
        
      
    ]
  ,
  resolve: 
    alias: 
      'vue$': 'vue/dist/vue.esm.js'
    ,
    extensions: ['*', '.js', '.vue', '.json']
  ,
  devServer: 
    historyApiFallback: true,
    noInfo: true,
    overlay: true
  ,
  performance: 
    hints: false
  ,
  devtool: '#eval-source-map'


if (process.env.NODE_ENV === 'production') 
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin(
      'process.env': 
        NODE_ENV: '"production"'
      
    ),
    new webpack.optimize.UglifyJsPlugin(
      sourceMap: true,
      compress: 
        warnings: false
      
    ),
    new webpack.LoaderOptionsPlugin(
      minimize: true
    )
  ])

还有package.json sn-p：

"devDependencies": 
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.0",
"babel-preset-stage-3": "^6.24.1",
"cross-env": "^5.0.5",
"css-loader": "^0.28.7",
"file-loader": "^1.1.4",
"node-sass": "^4.7.2",
"sass-loader": "^6.0.6",
"vue-loader": "^13.0.5",
"vue-template-compiler": "^2.4.4",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1"

我已经按照文档进行了一些搜索，但我仍然不确定如何修复。感谢您提供任何线索！

【参考方案1】：

我在一个从 webpack-simple 样板发展而来的 vue 项目中使用 scss

vue-init webpack-simple test-scss

尝试以下步骤在 vue 项目中设置 scss

使用上述命令安装基本设置后，在 npm 包下安装

npm install sass-loader node-sass style-loader --save-dev 

在webpack.config.js 下的规则数组中包含下面的加载器

rules:[ 
...,
...,

   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
   ]

]

到目前为止做了什么？ 使编译器能够将 scss 转换为 css 的配置已完成。

现在将.scss 导入main.js

import Vue from 'vue';
import App from './App.vue';

import './style.scss';

new Vue(
  el: '#app',
  render: h => h(App)
);

这是我的文件夹结构

您现在已准备好将 style.scss 中面向对象的 css 代码编译为 CSS

要在组件级别范围内使用 scss 必须在 <style> 标记中指定 lang="scss"

App.vue
<style lang="scss">
    $override-color : green;

    div 
        color: $override-color;
    
</style>

请参阅this manual 了解有关此主题的更多见解。期待您的反馈。

【参考方案2】：

我遇到了同样的问题。尝试删除 'vue-loader' 中的 ?indentedSyntax：

    test: /\.vue$/,
    loader: 'vue-loader',
    options: 
      loaders: 
        'scss': [
          'vue-style-loader',
          'css-loader',
          'sass-loader'
        ],
        'sass': [
          'vue-style-loader',
          'css-loader',
          'sass-loader?indentedSyntax'
        ]
      
      // other vue-loader options go here
    

结果应该是这样的：

 test: /\.vue$/,
    loader: 'vue-loader',
    options: 
      loaders: 
        // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
        // the "scss" and "sass" values for the lang attribute to the right configs here.
        // other preprocessors should work out of the box, no loader config like this necessary.
        'scss': [
          'vue-style-loader',
          'css-loader',
          'sass-loader'
        ],
        'sass': [
          'vue-style-loader',
          'css-loader',
          'sass-loader'
        ]
      
      // other vue-loader options go here

【讨论】：

“正确的配置”对于 scss 和 sass 看起来完全一样？或者你错过了什么？ – 这是哪个 Webpack 版本，顺便说一句？