Попытка получить файл CSS из файла Scss с помощью веб-пакета 4

Question

Я хотел бы настроить свои активы js и scss следующим образом:

• /src/_assets/js/app.js
• /src/_assets/js/development.js
• /src/_assets/scss/app.scss

И тогда я хотел бы закончить с этими статическими активами:

• /_site/js/app.js
• /_site/js/development.js
• /_site/css/app.css

Я все время на стороне js, но мне трудно заставить мой файл scss успешно превратиться в css.Файл CSS генерирует, если я форсирую mode: 'production', но первые 100 строк или около того заменяются набором прокомментированных js кода.И весь CSS-файл - это js код, если я разрешу mode: 'development'.

Что я делаю не так?

package.json:

{
  "devDependencies": {
    "@11ty/eleventy": "^0.7.1",
    "@babel/core": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "babel-loader": "^8.0.5",
    "css-loader": "^2.1.0",
    "mini-css-extract-plugin": "^0.5.0",
    "node-sass": "^4.11.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.28.4",
    "webpack-cli": "^3.2.1"
  }
}

webpack.config.js:

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const devMode = process.env.NODE_ENV !== 'production';

module.exports = {
	
	name: devMode ? 'development' : 'production',
	mode: devMode ? 'development' : 'production',

	entry: {

		// JS
		'js/app.js': './src/_assets/js/app.js',
		'js/development.js': './src/_assets/js/development.js',

		// SCSS
		'css/app.css': './src/_assets/scss/app.scss',
	},

	output: {
		path: __dirname + '/src',
		filename: '[name]',
	},

	module: {
		rules: [
			{
				test: /\.js/,
				loader: 'babel-loader',
				include: __dirname + '/src/_assets/js'
			 },
			{
				test: /\.(sa|sc|c)ss$/,
				use: [
					devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
					'css-loader',
					'sass-loader',
				],
				include: __dirname + '/src/_assets/scss'
			}
		],
	},

	plugins: [
		new MiniCssExtractPlugin(
			{
				// Options similar to the same options in webpackOptions.output
				// both options are optional
				filename: "./[name]",
				chunkFilename: "./[id].css"
			}
		)
	],

};

Answer 1

Я понял это.Вот изменения, которые я сделал:

webpack.config.js:

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {

name: process.env.NODE_ENV == 'production' ? 'production' : 'development',
mode: process.env.NODE_ENV == 'production' ? 'production' : 'development',

entry: {
    'app': './src/_assets/js/app.js',
    'development': './src/_assets/js/development.js',
},

output: {
    path: __dirname + '/src',
    filename: './js/[name].js',
},

module: {
    rules: [
        {
            test: /\.js/,
            loader: 'babel-loader',
            include: __dirname + '/src/_assets/js'
         },
        {
            test: /\.(sa|sc|c)ss$/,
            use: [
                'style-loader',
                MiniCssExtractPlugin.loader,
                'css-loader',
                'sass-loader',
            ],
        }
    ],
},

plugins: [
    new MiniCssExtractPlugin(
        {
            // Options similar to the same options in webpackOptions.output
            // both options are optional
            filename: "./css/[name].css",
            chunkFilename: "./css/[id].css"
        }
    )
],

};

/ src / _assets /js / app.js:

import './../scss/app.scss';