Question

我正在设置Webpack，并且一切正常，但是在开发中，它是内联而不是使用URL来提供编译后的scss样式表。

module: {
    rules: [
        {
            test: /\.scss$/,
            use: [
                { loader: "style-loader"},
                { loader: "css-loader" },
                { loader: 'postcss-loader',
                    options: {
                        plugins: () => [require('autoprefixer')]
                    }
                },
                { loader: "sass-loader" }
            ]
        }
    ]
}

因此，我抓住了docs，并阅读了有关如何使用单个CSS文件的信息。我将我的webpack配置更新为以下内容，由于所有加载程序都以相反的顺序运行，因此应该可以正常工作；

module: {
    rules: [
        {
            test: /\.scss$/,
            use: [
                { loader: "style-loader/url"}, 
                { loader: "file-loader" },
                { loader: "css-loader" },
                { loader: 'postcss-loader',
                    options: {
                        plugins: () => [require('autoprefixer')]
                    }
                },
                { loader: "sass-loader" }
            ]
        }
    ]
}

它不会导致任何错误，并将以下样式表插入到我的标题中；

<link rel="stylesheet" type="text/css" href="6bbafb3b6c677b38556511efc7391506.scss">

如您所见，它正在创建一个scss文件，而我当时期望的是一个.css文件。我试图移动文件加载器，但是那也不起作用，并导致了几次崩溃。知道如何将其转换为工作的CSS文件吗？

我不能在我的开发环境中使用mini-css-extract，因为我正在使用HMR。我已经在我的产品环境中进行了此工作。

更新：在删除css-loader时，它会编译并显示我的css应用于页面。但是，当我检查元素时，所有内容都位于第1行，并且找不到所指向的文件

我正在index.js中这样导入我的CSS；

import '../css/styles.scss';

Answer 1

您可以使用以下方法为webpack 4安装extract-text-webpack-plugin：

npm i -D extract-text-webpack-plugin @ next

您可以定义以下常量：

// Configuring PostCSS loader
const postcssLoader = {
    loader: 'postcss-loader',
    options: {
        ident: 'postcss',
        plugins: [
                // Write future-proof CSS and forget old preprocessor specific syntax.
                // It transforms CSS specs into more compatible CSS so you don’t need to wait for browser support.
                require('postcss-preset-env')()
        ]
    }
};

// Configuring CSS loader
const cssloader = {
    loader: 'css-loader',
    options: {
       importLoaders: 1
    }
};

然后在“ SASS加载程序”部分中，可以使用以下内容：

ExtractTextPlugin.extract({
    use: [cssloader, postcssLoader, 'sass-loader']
})

然后在“插件”部分，您需要使用以下内容：

new ExtractTextPlugin({
    filename: 'css/[name].css'
)

现在假设您的输入部分如下：

    entry: {
        app: 'index.js'
    }

生成的CSS将被命名为app.css并放置在css文件夹中。

用于处理这些类型的帖子创建操作的另一个有用的插件是：

HtmlWebpackPlugin和HtmlWebpackIncludeAssetsPlugin

使用这些插件以及extract-text-webpack-plugin可以为您提供很大的灵活性。

Answer 2

我在使用webpack时遇到了类似的问题，搜索了很长时间之后，我发现了合并几个插件的解决方案：

这是我的结果配置：（作为奖励，它保留了您的sass源图；））

watch: true,
mode: 'development',
devtool: 'source-map',
plugins: [
    new MiniCssExtractPlugin({
        filename: "[name].css", //make sure you use this format to prevent .scss extention in the hot reload file
        chunkFilename: "[id].css"
    })
],
module: {
    rules: [
        {
            test: /\.scss$/,
            use: [
                'css-hot-loader', //5. this will hot load all the extracted css.
                MiniCssExtractPlugin.loader, //4 this will extract all css
                {
                    loader: "css-loader", //3. this is where the fun starts
                    options: {
                        sourceMap: true
                    }
                },
                {
                    loader: "postcss-loader", //2. add post css
                    options: {
                        sourceMap: true
                    }
                },
                {
                    loader: "sass-loader", //1 . you can ingore the globImporter
                    options: {
                        importer: globImporter(),
                        includePaths: ["node_modules"],
                        sourceMap: true
                    }
                }
            ]
        },
    ]
}

Webpack 4-样式加载器/ URL不起作用

2 个答案: