Webpack Vue 2.0 scss语法与网页包
我正试着去Webpack Vue 2.0 scss语法与网页包,webpack,vue.js,webpack-2,Webpack,Vue.js,Webpack 2,我正试着去 (不是“sass”)在.vue文件中工作,以便Atom可以正确高亮显示。我发现的解决方案似乎适用于不同版本的vue或webpack。我有vue 2.1.8和webpack 2.1.0-beta.22 这不起作用: var path = require('path') var webpack = require('webpack') //test module.exports = { entry: './src/main.js', output: { path: pa
(不是“sass”)在.vue文件中工作,以便Atom可以正确高亮显示。我发现的解决方案似乎适用于不同版本的vue或webpack。我有vue 2.1.8和webpack 2.1.0-beta.22
这不起作用:
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:{}
语法,我认为是针对vue 1和resolve:{}
而不是module:{}
,我认为这是针对webpack 1的,但我不确定
谢谢我无意中发现,这一问题已在vue的新版本中得到解决。因此,我:
- 安装了一个新的vue
- 已检查网页包和网页包开发服务器的版本
- 安装了这些版本
- 复制到webpack.config.js上
- 安装了一个新的vue
- 已检查网页包和网页包开发服务器的版本
- 安装了这些版本
- 复制到webpack.config.js上
对我来说,安装
node sass
和sass loader
足以使其与vue 1和vue 2的vue cli网页包设置一起工作。如果我没记错的话,其中一个必须全局安装。对我来说,安装节点sass
和sass加载程序
足以使其与vue 1和vue 2的vue cli网页包设置一起工作。如果我没记错的话,其中一个必须在全球范围内安装
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
})
])
}