Question

我正在phalcon中申请水疗中心。我想将scss，vue用于我的资产，并使用webpack 4（我是新手）对其进行编译。我找到了minicssextract插件来编译css文件，但我不明白为什么找不到合适的类型。这是我的配置：

let path = require('path');
let webpack = require('webpack');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const devMode = process.env.NODE_ENV !== 'production';

module.exports = {
   entry: [
       './resources/js/app.js',
       './resources/scss/app.sсss'
   ],
   output: {
       path          : path.resolve(__dirname, './public/oauth/js'),
       publicPath    : '/oauth/js/',
       filename      : 'app.js',
   },
   devtool: "source-map",
   resolve: {
       alias: {
            'vue$': 'vue/dist/vue.esm.js'
       },
       extensions: ['*', '.js', '.vue', '.json']
   },
   module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: file => (
                     /node_modules/.test(file) &&
                     !/\.vue\.js/.test(file)
                )
            },
            {
                test: /\.(sa|sc|c)ss$/,
                use: [
                    devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader',
                ],
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: devMode ? '[name].css' : '[name].[hash].css',
            chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
        }),
        new VueLoaderPlugin()
    ]
};

但是它显示以下错误：

./ resources / scss /app.sсss1：2中的错误模块解析失败：意外的令牌（1：2）您可能需要适当的加载程序来处理此文件类型。 h1{ | color: red; | } @ multi ./resources/js/app.js./resources/scss/app.sсssmain [1]

Answer 1

这是一个入门的最小设置。您可以逐步添加功能，看看何时出错！如果出现问题，我很乐意提供帮助。

软件包版本：webpack（4.29.0）/ node-sass（4.11.0）/ sass-loader（7.1.0）

webpack.config.js

#els

./ src / index.js

const HtmlPlugin = require('html-webpack-plugin')
const CleanPlugin = require('clean-webpack-plugin')
const MiniCssPlugin = require('mini-css-extract-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
  mode: 'development',
  entry: ['./src/index.js', './src/index.scss'],
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
      {
        test: /\.scss$/,
        //use: ['style-loader', 'css-loader', 'sass-loader']
        use: [MiniCssPlugin.loader, 'css-loader', 'sass-loader'],
      },
    ],
  },
  plugins:[
    new CleanPlugin('dist'),
    new HtmlPlugin(),
    new MiniCssPlugin(),
    new VueLoaderPlugin()
  ]
}

./ src / index.scss

var title = document.createElement('h1')
title.innerHTML = 'Hello World'
document.body.appendChild(title)

为什么我的webpack.config.js无法编译CSS文件？

1 个答案: