Webpack将两个CSS文件和一个SCSS文件连接成一个CSS文件_Css_Merge_Sass_Concatenation_Webpack

Webpack将两个CSS文件和一个SCSS文件连接成一个CSS文件

css merge sass webpack

Webpack将两个CSS文件和一个SCSS文件连接成一个CSS文件,css,merge,sass,concatenation,webpack,Css,Merge,Sass,Concatenation,Webpack,我正在努力让webpack做我想做的事情。基本上，我尝试输入两个CSS文件和一个SCSS文件，然后从中输出一个CSS文件到目前为止，我的代码是： 'use strict'; var webpack = require('webpack'); var webpackDir = __dirname; let path = require('path'); let nodeModulesPath = path.join(webpackDir, 'node_modules'); //Proce

我正在努力让webpack做我想做的事情。基本上，我尝试输入两个CSS文件和一个SCSS文件，然后从中输出一个CSS文件

到目前为止，我的代码是：

'use strict';

var webpack = require('webpack');

var webpackDir = __dirname;

let path = require('path');
let nodeModulesPath = path.join(webpackDir, 'node_modules');

//Process the SCSS
var ExtractTextPlugin = require('extract-text-webpack-plugin');
let extractCSS = new ExtractTextPlugin('../css/[name].css',{allChunks: true});

function isDev() {

    var isDev = true;

    if (process.env.NODE_ENV === 'production') {

        isDev = false;
    }

    return isDev;
}

var definePlugin = new webpack.DefinePlugin({
    __DEV__: isDev()
});

module.exports = {
    resolve: {
        modulesDirectories: [webpackDir + '/node_modules'],
        alias: {
            rootReducers: path.join(webpackDir, '../../../../../themes/myProject-base/lib/myProject-core/register/myProject-redux-base/base-reducers'),
            rootActions: path.join(webpackDir, '../../../../../themes/myProject-base/lib/myProject-core/register/myProject-redux-base/base-actions'),
            rootUtils: path.join(webpackDir, '../../../../../themes/myProject-base/lib/myProject-core/register/myProject-redux-base/base-utils'),
            lunchMenusReducers: path.join(webpackDir, '/src/lunch-menus-common-js/reducers/lunch-menus-reducers'),
            lunchMenusActions: path.join(webpackDir, '/src/lunch-menus-common-js/actions/lunch-menus-actions'),
            lunchMenusConfigureStore: path.join(webpackDir, '/src/lunch-menus-common-js/configureStore')
        }
    },
    resolveLoader: {
        root: nodeModulesPath
    },
    entry: {
        backend: path.resolve(webpackDir + '/src/components/index.js'),
        widgetfrontend: path.join(webpackDir, '../../../includes/widget/public-js/scripts/main.js'),
        widgetbackend: path.join(webpackDir, '../../../includes/widget/js/scripts/main.js'),
        myProjectLunchMenusAdmin: [
            path.join(webpackDir, '../../scss/myProject-lunch-menus-admin.scss'),
            path.join(nodeModulesPath + 'react-datepicker/dist/react-datepicker.min.css'),
            path.join(nodeModulesPath + 'node_modules/quill/dist/*.css')
        ]
    },
    output: {
        path: path.resolve(webpackDir + '/../'),
        filename: '[name].js',
        devtoolLineToLine: true
    },
    plugins: isDev() !== true ? [
        extractCSS,
        new webpack.optimize.UglifyJsPlugin({minimize: true}),
        definePlugin
    ] : [
        extractCSS,
        definePlugin
    ],
    module: {
        loaders: [
            {
                test: /(src|myProject-base|widget)\/.+.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: [
                        require.resolve('babel-preset-es2015'),
                        require.resolve('babel-preset-react'),
                        require.resolve('babel-preset-stage-0')
                    ]
                }
            },
            {
                test: /\.scss$/i,
                loader: extractCSS.extract(['css','sass'])
            },
            {
                test: /\.jpe?g$|\.gif$|\.png$|\.svg$|\.woff$|\.ttf$/,
                exclude: /node_modules/,
                loader: 'file'
            }
        ]
    }
}

重点是MyProjectMenusAdmin，因为它不接收CSS+SCSS文件并输出一个CSS文件

我得到的错误是：

ERROR in multi myProjectLunchMenusAdmin
Module not found: Error: Cannot resolve 'file' or 'directory' /Users/joneslloyd/Documents/MAMP/myProjectv2/wp-content/plugins/myProject-lunch-menus/admin/js/scripts/node_modules/node_modules/quill/dist/*.css in /Users/joneslloyd/Documents/MAMP/myProjectv2/wp-content/plugins/myProject-lunch-menus/admin/js/scripts
 @ multi myProjectLunchMenusAdmin

ERROR in ./~/react-datepicker/dist/react-datepicker.min.css
Module parse failed: /Users/joneslloyd/Documents/MAMP/myProjectv2/wp-content/plugins/myProject-lunch-menus/admin/js/scripts/node_modules/react-datepicker/dist/react-datepicker.min.css Line 1: Unexpected token .
You may need an appropriate loader to handle this file type.

在这个阶段，即使是一个指针/建议也会非常有用

此配置存在几个问题

应该是一个目录名数组，将像
```
节点模块
```
一样解析（即：遍历目录树并查找
```
节点模块
```
文件夹）。不要在此数组中放置实际路径。这是我在webpack配置中看到的最常见的错误之一。由于npm是最杰出的软件包管理器，您通常不需要设置此选项，因为它已经默认为
```
节点\ u模块
```
命名的区块
```
MyProjectMenusAdmin
```
引用CSS文件，但您没有为
```
.CSS
```
扩展激活CSS加载程序。这就是
```
模块解析失败
```
错误试图说的
命名的chunk
```
myprojectMenusAdmin
```
引用glob模式
```
node\u modules/quill/dist/*.css
```
。Web包不理解全局模式。在您的例子中，它试图包含一个实际名为
```
*.css
```
的文件，这是
```
模块未找到
```
错误试图告诉您的。您只需向webpack传递一个文件，webpack就会计算出依赖关系图。例如：如果文件
```
main.css
```
导入另一个文件
```
css
```
，它也将包含该文件，依此类推。这样，webpack将只包含实际需要的文件，因为它们在您的程序中被引用。（顺便说一句：
```
node_模块/node_模块
```
看起来不正确）
为
```
ExtractTextPlugin
```
的第一个参数使用相对路径可能无效。我不知道这是否真的有效。您只需给出一个文件名，webpack就会在指定的
```
output.path
```
中将提取的统一CSS发送到一个具有该名称的文件中。
```
output.path
```
通常是一个没有子目录的平面文件夹。如果以后需要移动捆绑的文件，则应将其与网页包构建分开。这只是另一个构建步骤
```
resolveLoader.root
```
不需要修改，只要您通过npm安装加载程序（我强烈推荐）

我已尝试修复给定的配置。因为我不知道你的项目，所以不能保证这会奏效

'use strict';

let webpack = require('webpack');

let path = require('path');
let nodeModulesPath = path.join(__dirname, 'node_modules');

//Process the SCSS
let ExtractTextPlugin = require('extract-text-webpack-plugin');
let extractCSS = new ExtractTextPlugin('[name].css',{allChunks: true});
let isDev = process.env.NODE_ENV !== 'production';

var definePlugin = new webpack.DefinePlugin({
    __DEV__: isDev
});

module.exports = {
    resolve: {
        alias: {
            rootReducers: path.join(__dirname, '../../../../../themes/myProject-base/lib/myProject-core/register/myProject-redux-base/base-reducers'),
            rootActions: path.join(__dirname, '../../../../../themes/myProject-base/lib/myProject-core/register/myProject-redux-base/base-actions'),
            rootUtils: path.join(__dirname, '../../../../../themes/myProject-base/lib/myProject-core/register/myProject-redux-base/base-utils'),
            lunchMenusReducers: path.join(__dirname, 'src/lunch-menus-common-js/reducers/lunch-menus-reducers'),
            lunchMenusActions: path.join(__dirname, 'src/lunch-menus-common-js/actions/lunch-menus-actions'),
            lunchMenusConfigureStore: path.join(__dirname, 'src/lunch-menus-common-js/configureStore')
        }
    },
    entry: {
        backend: path.join(__dirname, 'src/components/index.js'),
        widgetfrontend: path.join(__dirname, '../../../includes/widget/public-js/scripts/main.js'),
        widgetbackend: path.join(__dirname, '../../../includes/widget/js/scripts/main.js'),
        myProjectLunchMenusAdmin: [
            path.join(__dirname, '../../scss/myProject-lunch-menus-admin.scss'),
            path.join(nodeModulesPath, 'react-datepicker/dist/react-datepicker.min.css'),
            path.join(nodeModulesPath, 'quill/dist/quill.base.css'),
            path.join(nodeModulesPath, 'quill/dist/quill.snow.css')
        ]
    },
    output: {
        path: path.resolve(__dirname, '..'),
        filename: '[name].js',
        devtoolLineToLine: true
    },
    plugins: [
        extractCSS,
        definePlugin
    ].concat(isDev ? [

    ] : [
        new webpack.optimize.UglifyJsPlugin({minimize: true})
    ]),
    module: {
        loaders: [
            {
                test: /(src|myProject-base|widget)\/.+.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel',
                query: {
                    presets: [
                        require.resolve('babel-preset-es2015'),
                        require.resolve('babel-preset-react'),
                        require.resolve('babel-preset-stage-0')
                    ]
                }
            },
            {
                test: /\.css$/i,
                loader: extractCSS.extract(['css'])
            },
            {
                test: /\.scss$/i,
                loader: extractCSS.extract(['css','sass'])
            },
            {
                test: /\.jpe?g$|\.gif$|\.png$|\.svg$|\.woff$|\.ttf$/,
                loader: 'file'
            }
        ]
    }
}

这真是太棒了。谢谢！我必须做的唯一编辑是CSS输出路径（它输出到与SCSS文件相同的目录中），我必须将其添加回：

resolveLoader:{root:nodeModulesPath}，

（只是因为rootreducer和rootActions需要了解node_模块）。非常感谢您的帮助-非常感谢！实际上，我还注意到一件事：它输出一个同名的JS文件，以及CSS文件！因此，在我的CSS文件夹中，我正确地拥有MyProjectSultMenusAdmin.CSS，但在我的webpack配置文件的文件夹中，我拥有MyProjectSultMenusAdmin.js。有什么方法可以防止这种情况发生吗？恐怕没有。因为webpack假设所有文件类型都以某种方式嵌入JavaScript中。例如，捆绑的CSS只是一个JavaScript字符串。ExtractTextWebpackPlugin只是将该字符串放入一个单独的文件中。周围的CommonJS模块保留在JavaScript文件中，尽管您的案例中不再有实际的代码。我们讨论了webpack是否应该能够理解JavaScript以外的其他文件类型：感谢您的解释和链接！我去看看！