ERROR in ./src/assets/styles/global.styl (./node_modules/css-loader!./node_modules/stylus-loader!./node_modules/postcss-loader/lib??ref--3-3!./src/assets/styles/global.styl)
这个要怎么解决呀
这个要怎么解决呀
2018-05-31
估计是你loader 没配置好
我用的是 webpack 4.8.1 的,我把webpack.config.js贴给你,你比较一下
/** * webpack.config * powr by frend * @type {{}} */const path = require('path');const VueLoaderPlugin = require('vue-loader/lib/plugin')const HtmlPlugin = require('html-webpack-plugin')const webpack = require('webpack')//const ExtractPlugin = require('extract-text-webpack-plugin')const MiniCssExtractPlugin = require("mini-css-extract-plugin");const isDev = process.env.NODE_ENV === "development"const config = { target: 'web', entry: path.join(__dirname,'src/index.js'), output: { filename: 'bundle.js', path: path.join(__dirname,'/dist/') }, mode: "development", watch: false, module:{ rules:[ { test: /\.vue$/, loader: 'vue-loader' }, { test: /\.jsx/, loader: 'babel-loader' }, { test: /\.css$/i, use:[ { loader: 'style-loader' }, { loader: 'css-loader' } ] }, { test: /\.(gif|jpg|jpeg|png|svg)$/i, use: [ { loader: 'url-loader', options: { limit: 1024, name: '[name]-[hash:5].[ext]' } } ] } ] }, plugins: [ new VueLoaderPlugin(), new webpack.DefinePlugin({ // 设定项目的运行环境,在js代码中可以引用到(类似于一个很大的全局变量) 'process.env': { NODE_ENV: isDev ? '"development"' : '"production"' } }), new HtmlPlugin({ filename: './index.html', template: './src/index.html' }) ]}if(isDev) { config.module.rules.push({ //开发环境的配置 test: /\.styl$/i, use: [ 'style-loader', 'css-loader', { loader: 'postcss-loader', options: { sourceMap: true } }, 'stylus-loader' ] }) config.devtool = "#cheap-module-eval-source-map", //方便在页面上以原始模式展示 js脚本 config.devServer = { port: 8000, host: '0.0.0.0', //监听的ip 0.0.0.0 可以通过 localhost | 127.0.0.0 | 内网IP也可以访问 overlay: { errors: true, //编译时 如果有错误,显示在网页上 }, hot: true //组件级更新页面,false时为整个页面刷新 注意,这个需要 HotModuleReplacementPlugin 来配合 } config.plugins.push( new webpack.HotModuleReplacementPlugin(), //组件级更新页面 new webpack.NoEmitOnErrorsPlugin() // 不知道干啥 )} else { config.entry = { //库文件与业务逻辑拆分之配置1 app: path.join(__dirname,'src/index.js'), vendor: ['vue'] } config.output.filename= '[name].[chunkhash:8].js' config.module.rules.push({ test: /\.styl$/i, use: [ MiniCssExtractPlugin.loader,'css-loader', { loader: 'postcss-loader', options: { sourceMap: true } }, 'stylus-loader' ] }) config.plugins.push( // new ExtractPlugin('styles.[contentHash:8].css') new MiniCssExtractPlugin({ filename: 'style.[contentHash:8].css', chunkFilename: '[id].css' }), // new webpack.optimize.CommonsChunkPlugin({ //库文件与业务逻辑拆分之配置2 // name: 'vendor' // }) ) config.optimization = { splitChunks: { name: 'vendor' } }, config.optimization = { splitChunks: { name: 'runtime' } }}module.exports = config;
举报