分类导航

CSS 发布时间：2022-04-17 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了webpack sass-loader没有生成css文件，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我无法弄清楚如何使用webpack sass-loader呈现css文件.

这是我的webpackconfig.js的样子：

@H_322_4@module.exports = { context: __dirname + "/app",entry: { javascript: "./app.js",html: "./index.html" },output: { filename: "app.js",path: __dirname + "/dist" },module: { loaders: [ //JAVASCRIPT { test: /\.js$/,exclude: /node_modules/,loaders: ["babel-loader"],},//Index HMTML { test: /\.html$/,loader: "file?name=[name].[ext]",//Hotloader { test: /\.js$/,loaders: ["react-hot","babel-loader"],// SASS { test: /\.scss$/,loader: 'style!css!sass' } ],} }

如您所见,我正在使用文档中指定的sass-loader模块加载器.

{
    test: /\.scss$/,loader: 'style!css!sass'
  }

我的根@R_618_7957@：

Project Root:
  app:
    style.scss
  dist:
   ?????? WTF is my css file??
  webpack.config.js

我可以得到其他一切工作,如html和jsx babble加载器.
我只需在命令行中键入webpack即可.

我在使用sass loader做错了.
它是什么？
请帮忙.

解决方法

您正在使用样式加载器,默认情况下,它将您的CSS嵌入到Javascript中并在运行时注入它.

如果你想要真正的CSS文件而不是你的Javascript中嵌入的CSS,你应该使用ExtractTextPlugin.

基本配置是：

>添加var ExtractTextPlugin = require(‘extract-text-webpack-plugin’);到您的Webpack配置文件的顶部.
>将以下内容添加到Webpack配置中：

plugins: [
    new ExtractTextPlugin('[name].css'),]

>将您的SASS加载程序配置更改为以下内容：

{
    test: /\.scss$/,loader: ExtractTextPlugin.extract(
        'style-loader',// BACkup loader when not building .css file
        'css-loader!sass-loader' // loaders to preprocess CSS
    )
}

这样做是将它可以在您的包中找到的所有CSS提取到一个单独的文件中.该名称将基于您的入口点名称,在您的情况下将导致javascript.css(来自您的配置的入口部分).

插件使用ExtractTextPlugin.extract-loader在代码中查找CSS并将其放在单独的文件中.例如,你给它的第一个参数是它在遇到async模块中的文件时应该回退到的加载器.通常,这几乎总是样式加载器.第二个参数告诉插件用什么加载器来处理CSS,在本例中是css-loader和sass-loader,但是经常使用postcss-loader之类的东西.

有关使用Webpack构建CSS的更多信息,请访问：https://webpack.github.io/docs/stylesheets.html#separate-css-bundle