1

我对 webpack 完全陌生（从那时起就一直在使用 gulp）。

但是，我刚刚决定使用 webpack。决定使用 webpack 2（目前为 2.1.0-beta.20）。一直在寻找，仍然无法完成一个简单的任务，例如“给 webpack 我的bootstrap.scss文件（它会导入所有其他需要的引导程序部分 scss 文件）并返回bootstrap.custom.min.css和bootstrap.custom.min.css.map”。

我有我自己的bootstrap.scss文件，它只从引导程序中导入我需要的东西（而不是全部使用），但是在custom-variables.scss顶部导入了一个自定义文件之后，覆盖了一些默认的引导程序变量——比如颜色、网格列等。无论如何，我确定这不相关...问题是使用自定义输出文件名和源映射进行编译scss。css

并不是说它会有所作为，但首先，这是我的习惯bootstrap.scss：

@import "custom-variables"; // to overwrite default bootstrap variables
/**
 * Twitter Bootstrap
 * This is actually copy/paste from the original bootstrap file, just changed paths
 */
// Core variables and mixins
@import "../../../../node_modules/bootstrap/scss/variables";
@import "../../../../node_modules/bootstrap/scss/mixins";
// and so on... only what I need. I don't need tables, forms and a few other.

除此之外，我也有我自己style.scss的，我需要做同样的事情（返回style.min.css和style.min.css.map）。

至于我的webpack.config.js文件，这就是我所拥有的： 

const webpack = require('webpack');
const autoprefixer = require('autoprefixer');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require('path');

const sassLoaders = [
    'css-loader',
    'postcss-loader',
    'sass-loader?indentedSyntax=sass&includePaths[]=' + path.resolve(__dirname, './dev')
];

const config = {
    entry: {
        'bootstrap.custom.min': ['./wp-bootstrap'], // this file only contains 1 line: require('./dev/css/overwrite/bootstrap/bootstrap.scss');
        'style.min': ['./wp-style'], // this file also contains 1 line: require('./dev/css/style.scss');
    },
    module: {
        loaders: [
            {
                test: /\.scss$/,
                loader: 'file',
                // or, other examples I've found said to use:
                // loader: ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loaders: 'css!sass' }),
                // but if I try like that, I get: "Cannot read property 'query' of undefined"
                query: {
                   name: '[name].css'
                }
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin('[name].css')
    ],
    postcss: [
        autoprefixer({
            browsers: ['last 2 versions']
        })
    ],
    resolve: {
        modules: [
            path.resolve('./'),
            'node_modules'
        ]
    }
};

module.exports = config;

这些是我安装的所有相关软件包： 

"devDependencies": {
    "autoprefixer": "^6.4.0",
    "css-loader": "^0.23.1",
    "extract-text-webpack-plugin": "^2.0.0-beta.3",
    "node-sass": "^3.8.0",
    "postcss-loader": "^0.9.1",
    "sass-loader": "^4.0.0",
    "style-loader": "^0.13.1",
    "webpack": "^2.1.0-beta.20"
  }

如果我使用 <2.x 的 extract-text-webpack-plugin 版本，则会出现其他错误，它与 webpack 2 不兼容。

所以，上面代码中的小步骤......只需尝试至少获取我的bootstrap.scss并style.scss转换为 2 个单独的 css 文件：bootstrap.custom.min.css并且style.min.css（还不知道如何处理源映射）。

这就是我在搜索谷歌并尝试遵循一些示例后所能想到的。没有可靠的教程可以让我了解如何使用 webpack 来完成我需要完成的工作。我只是在这里猜测，蒙着眼睛。

但是当我webpack在控制台中输入并按 Enter 时，我没有得到任何 css 文件，而是得到以下 3 个文件：

  1. bootstrap.css- 与源内容完全相同 bootstrap.scss，就像它只是将文件内容复制过来，而不是将 scss 编译为 css；
  2. bootstrap.custom.min.js其中有一堆javascript代码；
  3. style.min.js- 其中也有一堆 javascript 代码。

我被困在这里好几天了，甚至没有得到我需要的所有其他东西（源地图和我为 css 文件和 css.map 文件选择的目标文件夹）。

4

0 回答 0