代码如下:
const path = require('path'); const VueLoaderPlugin = require('vue-loader/lib/plugin'); module.exports = { mode: 'development', entry: path.join(__dirname, 'src/index.js'), output: { filename: 'bundle.js', path: path.join(__dirname, 'dist') }, module: { rules: [ { test: /\.vue$/, loader: 'vue-loader' }, { test: /\.css$/, use:[ 'style-loader', 'css-loader' ] }, { test: /\.js?$/, loader: 'babel-loader' }, { test: /\.(jpg|jpeg|gif|bmp|png)$/, use:[ { loader: 'url-loader', options: { limit: 1024, name: '[name]-[hash].[ext]' } } ] }, { test: /\.styl/, use:[ 'style-loader', 'css-loader,', 'stylus-loader' ] } ] }, plugins:[ new VueLoaderPlugin() ] }
import Vue from 'vue' import App from './app.vue' import './assets/styles/text.css' import './assets/img/1.jpg' import './assets/styles/test.styl' const root = document.createElement("div"); document.body.appendChild(root); new Vue({ render:function(h){ return h(App) } }).$mount(root);
请问大家,这是什么原因呢?
css-loader处明显多了一个逗号,另外,/\.styl/最好改成/\.styl(us)?$/, 不然在vue组件内的style模板声明 lang='stylus'后会报错。改完了表示即可以编译.styl文件,也可以编译vue组件内的stylus,正则表达式中最好添加$表示匹配结束。
检查node_modules文件夹里面有没有style-loader这个包,css-loader应该要依赖这个包,如果没有安装试一下,或者node_modules文件夹如果有vue-style-loader这个包,把规则里的style-loader改成这个