vue安装node-sass编译报错

wylc123 1年前 ⋅ 504 阅读

1.在搭建vue脚手架 或者是在vue项目中,想使用sass的功能,

cnpm install node-sass --save-dev //安装node-sass
cnpm install sass-loader --save-dev //安装sass-loader
cnpm install style-loader --save-dev //安装style-loader 有些人安装的是 vue-style-loader 其实是一样的!
Markup

我的成功之后package.json中的配置如下:

"node-sass": "^4.12.0",
"sass-loader": "^7.3.1",
"vue-style-loader": "^3.0.1",
"css-loader": "^0.28.0"
JavaScript

2.打开build文件夹下面的webpack.base.config.js

module: {
    rules: [
          {
            test: /\.vue$/,
            loader: 'vue-loader',
            options: vueLoaderConfig
          },
          {
            test: /\.js$/,
            loader: 'babel-loader',
            include: [resolve('src'),
            resolve('test')]
          },
          {
             test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
             loader: 'url-loader',
             options: {
                limit: 10000,
                 name: utils.assetsPath('img/[name].[hash:7].[ext]')
                             }
                 },
          {
                    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                    loader: 'url-loader',
                   options: {
                               limit: 10000,
                               name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
                            }
                   },
          { //从这一段上面是默认的!不用改!下面是没有的需要你手动添加,相当于是编译识别sass!
                     test: /\.scss$/,
                     loaders: ["style", "css", "sass"]
                  }
               ]
           }
JavaScript

安装完成后,运行时出现了错误

Modele build failed: TypeError: this.getResolve is not a function at Object.loader...
Markup

这是因为当前sass的版本太高,webpack编译时出现了错误,这个时候只需要换成低版本的就行,下面说一下修改方法,很简单,如下,找到package.json文件,里面的 "sass-loader"的版本更换掉 就行了。

我本地是将    "sass-loader": "^8.0.0",更换成了 "sass-loader": "^7.3.1",
Markup

然后cnpm install一下

这时候重新跑项目,就运行成功了。

3.在需要用到sass的地方添加lang=scss

<style lang="scss" scoped="" type="text/css">
//你的sass语言 $primary-color: #333;
   body {
        color: $primary-color; //编译后就成了 color:#333;类似于js的变量!
       }
</style>
Markup
 

问题二、Module build failed: Error: ENOENT: no such file or directory, scandir node-sass

应该是在安装全局依赖的时候,没有安装到vendor,通过rebuild命令重新安装一下就可以啦。

解决办法:

// 使用 npm命令重新编译node-sass  
  
$ cnpm rebuild node-sass

 

更多内容请访问:IT源点

相关文章推荐
  • 该目录下还没有内容!

全部评论: 0

    我有话说: