These two days, I played with webback and lay in a lot of holes. Today, I read a blogger's article to solve this problem. He explains each part of the configuration.
99.9% of the following configuration is copied from the blogger: https://www.cnblogs.com/nianyifenzhizuo/p/10271001.html
Installing node sass in package.json may not succeed due to network reasons
There is a long list of error messages, in which python and gyp are mentioned, but they need not be installed. Just execute the following command:
npm set sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
npm i node-sass -D
The following is the basic configuration of a vue project:
Project root:
package.json
Project root = > build folder
webpack.base.confg.js
const webpack = require('webpack') const { resolve }= require('path') const VueLoaderPlugin = require('vue-loader/lib/plugin') const HtmlWebpackPlugin = require('html-webpack-plugin') const MiniCssExtractPlugin = require('mini-css-extract-plugin') const isDev = process.env.NODE_ENV === 'production' let pluginsConfig = [ new VueLoaderPlugin(), new HtmlWebpackPlugin({ title: 'my App', template: resolve(__dirname, '../src/index.html') }), new webpack.DefinePlugin({ 'process.env': { 'NODE_ENV': JSON.stringify(process.env.NODE_ENV) } }) ] if (!isDev) { pluginsConfig = pluginsConfig.concat(new MiniCssExtractPlugin({ filename: "css/[name]_[contenthash].css" })) } module.exports = { mode: process.env.NODE_ENV || 'production', entry: resolve(__dirname, '../src/index.js'), output: { filename: 'bundle.js', path: resolve(__dirname, '../dist') }, resolve: { //Suffixes can be omitted when importing extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', //@That's it src Folder path '@': resolve('src'), } }, module: { rules: [{ test: /\.vue$/, loader: 'vue-loader' }, { test: /\.scss$/, use: [ isDev ? 'vue-style-loader' : MiniCssExtractPlugin.loader, { loader: 'css-loader', options: { modules: true, localIdentName: '[local]_[hash:base64:8]' } }, 'sass-loader' ] }, { test: /\.(png|jpg|gif)$/, loader: 'url-loader?name=images/[name]-[contenthash:5].[ext]&limit=2000' }, { test: /\.js$/, loader: 'babel-loader?cacheDirectory', exclude: '/node_modules/', include: resolve(__dirname, '../src') } ] }, plugins: pluginsConfig, }