Vue 2.0 Scss-Syntax mit Webpack

Question

Ich versuche <style lang="scss"> (nicht "Sass") zu bekommen, in. Vue-Dateien zu arbeiten, so dass Atom richtig hervorheben kann. Die Lösungen, die ich gefunden habe, scheinen sich auf eine andere Version von Vue oder Webpack zu beziehen. Ich habe vue 2.1.8 bekam und webpack 2.1.0-beta.22

dies nicht funktioniert:

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

module.exports = { 
    entry: './src/main.js', 
    output: { 
    path: path.resolve(__dirname, './../dist'), 
    publicPath: '/dist/', 
    filename: 'build.js' 
    }, 
    resolveLoader: { 
    root: path.join(__dirname, 'node_modules'), 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.vue$/, 
     loader: 'vue', 
     options: { 
      loaders: { 
      'scss': 'style-loader!css-loader!sass-loader' 
      // 'sass': 'vue-style!css!sass?indentedSyntax' 
      } 
     } 
     }, 
     { 
     test: /\.js$/, 
     loader: 'babel', 
     exclude: /node_modules/ 
     }, 
     { 
     test: /\.(png|jpg|gif|svg)$/, 
     loader: 'file', 
     query: { 
      name: '[name].[ext]?[hash]' 
     } 
     } 
    ] 
    }, 
    devServer: { 
    historyApiFallback: true, 
    noInfo: true, 
    proxy: { 
     '/site/api/**': { 
     target: 'http://localhost:8888', 
     secure: false, 
     "changeOrigin": true 
     }, 
     '/site/font/*': { 
     target: 'http://localhost:8888', 
     secure: false, 
     "changeOrigin": true 
     } 
    } 
    }, 
    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({ 
     compress: { 
     warnings: false 
     } 
    }) 
    ]) 
} 

ich auch versucht vue: {} Syntax haben, was meiner Meinung nach für vue 1 und resolve: {} anstelle von module: {}, ich denke, das ist für Webpack 1, aber ich bin mir nicht sicher.

danke

Answer 1

Durch Zufall fand ich heraus, dass diese bereits in einer neueren Version von vue gelöst wurden. So I:

• gemacht eine neue vue installieren
• die Versionen von webpack geprüft und webpack-dev-Server
• installiert diese Versionen
• über die webpack.config.js kopiert

Answer 2

Dies funktionierte am Ende (kopiert von neueren vue installieren)

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: /\.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 nessessary. 
      '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.common.js' 
    } 
    }, 
    devServer: { 
    historyApiFallback: true, 
    noInfo: true, 
    proxy: { 
     '/site/api/**': { 
     target: 'http://localhost:8888', 
     secure: false, 
     "changeOrigin": true 
     }, 
     '/site/font/*': { 
     target: 'http://localhost:8888', 
     secure: false, 
     "changeOrigin": 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 
    }) 
    ]) 
} 

Answer 3

Für mich war die Installation von node-sass und sass-loader genug, um es mit dem vue-cli webpack setup für vue 1 und vue 2 funktionieren zu lassen. Einer davon musste global installiert werden, wenn ich mich richtig erinnere.