我想要得到 {。1}}（不是＆＃34; sass＆＃34;）在.vue文件中工作，以便Atom可以正确突出显示。我发现的解决方案似乎适用于vue或webpack的不同版本。我有vue 2.1.8和webpack 2.1.0-beta.22
这不起作用：
<style lang="scss">我也试过了
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
}
})
])
}
语法，我认为是针对vue 1和vue: {}而不是resolve: {}，我认为这适用于webpack 1，但我不确定。
谢谢
答案 0 :(得分：3)
这最终起作用（从较新的vue安装中复制）
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
})
])
}
答案 1 :(得分：2)
对我来说，安装node-sass和sass-loader足以让它适用于vue 1和vue 2的vue-cli webpack设置。如果我记得的话，其中一个必须全局安装正确。
答案 2 :(得分：1)
偶然我发现这已经在较新版本的vue中解决了。所以我：