0

基本上我想在生产中提取 css，但我想在开发模式下将它留在 JavaScript 文件中。

这样我就可以使用显示使用的 sass 文件的源映射。

我希望能够拥有：

<link href="~/dist/css/site.css" rel="stylesheet" />
<script type="text/javascript" src="~/dist/js/manifest.js"></script>
<script type="text/javascript" src="~/dist/js/css.js"></script>

地面上的文档有点薄。

所以在开发模式下site.css将是空的，并且不会像它不存在那样导致错误。css.js将用于样式和源映射。

在生产模式下css.js将存在但不做任何事情，因为 css 已被提取。这意味着 css 将很好地快速加载并缩小，site.css但没有映射。

4

1 回答 1

0

我所做的是：已安装并需要 webpack-create-file-plugin 创建 css 目录，其中包含一个 .empty 文件，因为该目录必须存在。

这通常是我的做法：

const extractSass = new ExtractTextPlugin("css/site.css");
const sassOptions = removeEmpty([
    ifNotProd({
        loader: "style-loader"
    }),
    {
        loader: "css-loader",
        options: {
            sourceMap: ifNotProd()
        }
    }, {
        loader: "sass-loader",
        options: {
            outputStyle: ifProd("compressed", "expanded"),
            sourceMap: ifNotProd()
        }
    }
]);

sass 规则如下所示：

{
    test: /\.scss$/,
    use: ifProd(extractSass.extract({
        use: sassOptions,
        fallback: "style-loader"
    }), sassOptions)
}

添加到插件ifNotProd(new CreateFilePlugin({files: ["css/site.css"]}))和ifProd(extractSass)

于 2017-09-12T10:56:36.107 回答