Question

我对webpack完全不熟悉（因为......永远都在使用gulp）。

但是，我刚决定使用webpack。决定使用webpack 2（目前为2.1.0-beta.20）。一直在寻找，仍然无法做一个简单的任务，“给webpack我的bootstrap.scss文件（导入所需的所有其他bootstrap部分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"
  }

如果我使用的是extract-text-webpack-plugin的版本是＆lt; 2.x，那么我会收到其他错误，它与webpack 2不兼容。

所以，上面的代码中的宝贝步骤...只是尝试至少获取我的bootstrap.scss和style.scss转换为2个单独的css文件：bootstrap.custom.min.css和style.min.css （不知道如何处理源图）。

这是我在搜索谷歌并尝试按照一些例子后想出来的。没有可靠的教程可以让我了解如何使用webpack来实现我需要完成的任务。我只是猜测，盲目折叠。

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

bootstrap.css - 内容与源完全相同 bootstrap.scss，就像只复制文件内容一样，而不是将scss编译为css;
bootstrap.custom.min.js里面有一堆javascript代码它;
style.min.js - 其中还包含一堆javascript代码。

我已经被困在这里好几天了，甚至没有得到我需要的所有其余部分（源代码和我选择的css文件和css.map文件的目标文件夹）。

Webpack 2 - 将scss编译为css和miniffy，以及sourcemaps

0 个答案: