首页 文章

webpack sass-loader没有生成css文件

提问于
浏览 次
35

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

这是我的webpackconfig.js的样子：

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$/,
        exclude: /node_modules/,
        loaders: ["react-hot", "babel-loader"],
      },

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

    ],
  }

}

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

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

我的根看起来像这样：

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

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

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

sass loader webpack

2 回答

  • 0

    您正在使用样式加载器，默认情况下，它将您的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模块中的文件时应该回退到的加载器 . 一般来说，这几乎总是 style-loader . 第二个参数告诉插件用于处理CSS的加载器，在本例中为 css-loader 和 sass-loader ，但是 postcss-loader 之类的东西也经常使用 .

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

    回复于
  • 55

    使用TypeScript并遇到类似的问题，我发现'scss'文件导入应该在Webpack开始的索引文件中 .

    在index.ts中导入而不是在内部模块中导入 .

    回复于

相关问题