Vue文件中的Sass无法编译

当通过npm dev watch或npm dev run编译sass时，出现错误。Vue文件中的Sass无法编译

npm ERR! Darwin 16.5.0 
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "development" 
npm ERR! node v6.9.5 
npm ERR! npm v3.10.10 
npm ERR! code ELIFECYCLE 
npm ERR! @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js` 
npm ERR! Exit status 2 
npm ERR! 
npm ERR! Failed at the @ development script 'cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js'. 
npm ERR! Make sure you have the latest version of node.js and npm installed. 
npm ERR! If you do, this is most likely a problem with the package, 
npm ERR! not with npm itself. 
npm ERR! Tell the author that this fails on your system: 
npm ERR!  cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js 
npm ERR! You can get information on how to open an issue for this project with: 
npm ERR!  npm bugs 
npm ERR! Or if that isn't available, you can get their info via: 
npm ERR!  npm owner ls 
npm ERR! There is likely additional logging output above. 
npm ERR! Please include the following file with any support request: 
npm ERR!  /Users/mike/code/chatroom/npm-debug.log

这是我写在Chat.vue文件中的问题。我对npm等前端工具并不熟悉，所以我不知道该怎么尝试。我按照这里的指示（https://github.com/vuejs/vue-loader/issues/363）尝试运行npm install sass-loader node-sass webpack --save-dev，但它没有任何区别。

该文件的实际内容与.vue文件中的几乎任何样式内容发生的内容无关。

<style lang="scss"> 
    .chat { 
     background-color: #fff; 
     border: 1px solid #D3E0E9; 
     border-radius: 3px; 

     &__form { 
      border-top: 1px solid #D3E0E9; 
      padding: 10px; 

      &-input { 
       width: 
       border: 1px solid #D3E0E9; 
       padding: 5px 10px; 
       outline: none; 
      } 

      &-helptext { 
       color: #aaa; 
      } 
     } 
    } 
</style>

NPM版本3.10.10 节点版本6.9.5

我的WebPack-dev的服务器/客户机/ webpack.config.js文件如下;

module.exports = { 
    module: { 
     rules: [ 
      { 
       test: /\.pug$/, 
       use: [ 
        "pug-loader?self", 
       ] 
      }, 
      { 
       test: /\.css$/, 
       use: [ 
        "style-loader", 
        "css-loader" 
       ], 
      } 
     ] 
    } 
};

来源

2017-05-27 mikelovelyuk

那么https://github.com/vuejs/vue-loader/issues/363#issuecomment-297196238和https://vuejs-templates.github.io/webpack/pre-processors.html呢？ – mikelovelyuk

你可以发布你的webpack配置文件吗？ –

@TinusWagner完成 – mikelovelyuk

见https://vue-loader.vuejs.org/en/configurations/pre-processors.html

{ 
    test: /\.vue$/, 
    loader: 'vue-loader', 
    options: { 
    loaders: { 
     scss: 'vue-style-loader!css-loader!sass-loader', // <style lang="scss"> 
     sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax' // <style lang="sass"> 
    } 
    } 
}

还包括SCSS规则

{ 
    test: /\.s(a|c)ss$/, 
    use: [ 
    "style-loader", 
    "css-loader", 
    "sass-loader" 
    ] 
}

来源

2017-05-29 08:37:09

没有区别 – mikelovelyuk

如果还没有，为[.sass-loader'，'css-loader'，'sass-loader']添加.sass和.scss文件的新规则。 –

如何？我不知道语法 – mikelovelyuk

NPM安装--save-dev的青菜，装载机式装载机CSS-装载机

也许，您尚未安装'style-loader'和'css-loader'尚未安装

来源

2017-05-29 13:38:53 LiangJinQing

没有区别 – mikelovelyuk

Vue文件中的Sass无法编译

回答

相关问题