vue使用sass报错？
用webpack能够正确编译sass，在vue文件中使用 style lang="sass" 就会报错，请问如何解决？
webpack配置如下
var webpack = require('webpack');
module.exports = {
entry: {
//app: "./app.js"
test: "./test.js"
},
output: {
publicPath: "http://192.168.75.128:9090/dist",
path: "dist/",
filename: "[name].js"
},
module: {
loaders: [
{
test: /\.vue$/,
loader: "vue"
}, {
test: /\.js$/,
loader: "babel"
}, {
test: /\.css$/,
loader: "style!css"
}, {
test: /\.sass$/,
loader: "style!css!sass"
}
]
},
plugins:[
new webpack.DefinePlugin({
'process.env.NODE_ENV': '"development"'
})
],
devtool: "#sourcemap"
};
依赖
"dependencies": {
"vue": "^1.0.18",
"vue-resource": "^0.7.0",
"vue-router": "^0.7.11"
},
"devDependencies": {
"babel-core": "^6.7.4",
"babel-loader": "^6.2.4",
"babel-plugin-transform-runtime": "^6.6.0",
"babel-preset-es2015": "^6.6.0",
"css-loader": "^0.23.1",
"node-sass": "^3.4.2",
"sass-loader": "^3.2.0",
"style-loader": "^0.13.1",
"vue-hot-reload-api": "^1.3.2",
"vue-html-loader": "^1.2.0",
"vue-loader": "^8.2.2",
"vue-style-loader": "^1.0.0",
"webpack": "^1.12.14",
"webpack-dev-server": "^1.14.1"
}
在vue文件中报错如下
index.vue
<style lang="sass">
$dd : 100px
div
width: $dd
height: $dd
background-color: red
</style>
<template lang="">
<div>
hello
</div>
</template>
<script lang="">
</script>
app.js
import Vue from "vue";
import Router from "vue-router";
import Index from "./views/index.vue";
Vue.use(Router);
var router = new Router();
router.map({
'/': {
component: Index
}
});
router.start(Vue.extend({}), "body");
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>Document</title>
</head>
<body>
<div></div>
<router-view></router-view>
<script src="dist/app.js"></script>
</body>
</html>
以下是测试成功的代码
test.js
import './test.sass'
test.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<div></div>
<script src="dist/test.js"></script>
</body>
</html>
test.sass
$dd : 100px
div
width: $dd
height: $dd
background-color: red
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
需要一个vue-loader吧