Webpack 不转换 SCSS (ExtractTextPlugin)

DWB

我无法让 webpack (2.2.1) 将我的 .scss (main.scss) 文件编译为 css 文件。所有正确的源文件都在那里,但是没有创建 css 输出。

我查看了大量不同的指南,他们似乎都使用与我类似的设置来使其工作。

要记住的是,我正在运行 webpackwebpack --debug --display-error-details --watch并且没有错误(只是没有 css 输出)。

我的 webpack 配置如下所示:

const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    entry: [
        './src/app.js'
    ],
    output: {
        path: 'dist/static/scripts',
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: { presets: [ 'es2015', 'react' ] }
            },
            {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract('css!sass')
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin({
            filename: 'dist/static/styles/[name].css',
            allChunks: true
        })
    ],
    devServer: {
        contentBase: './dist',
        hot: true
    },
};

目录结构是这样的:

dist/
    static/
        scripts/
        styles/
node_modules/
src/
    actions/
    components/
    constants/
    containers/
    lib/
    reducers/
    scss/
        main.scss
    store/
    app.js
package.json
webpack.config.js

并且 webpack 的观察输出是这样的

Hash: 46d75c2b162f5e746664
Version: webpack 2.2.1
Time: 1675ms
    Asset    Size  Chunks                    Chunk Names
bundle.js  831 kB       0  [emitted]  [big]  main
  [12] ./~/react/react.js 56 bytes {0} [built]
  [20] ./~/react/lib/React.js 2.69 kB {0} [built]
  [27] ./~/redux/es/index.js 1.08 kB {0} [built]
  [34] ./~/react-redux/es/index.js 194 bytes {0} [built]
  [96] ./src/app.js 780 bytes {0} [built]
 [104] ./src/containers/App.js 980 bytes {0} [built]
 [105] ./src/containers/ChoiceContainer.js 1.18 kB {0} [built]
 [106] ./src/containers/ResultContainer.js 623 bytes {0} [built]
 [107] ./src/containers/TimeContainer.js 1.15 kB {0} [built]
 [109] ./src/reducers/Reducers.js 583 bytes {0} [built]
 [111] ./src/store/SleepStore.js 378 bytes {0} [built]
 [136] ./~/react-dom/index.js 59 bytes {0} [built]
 [150] ./~/react-dom/lib/ReactDOM.js 5.14 kB {0} [built]
 [209] ./~/react-redux/es/connect/connect.js 5.34 kB {0} [built]
 [235] multi ./src/app.js 28 bytes {0} [built]
    + 221 hidden modules
✨  Done in 2.26s.

因此,由于一些奇怪的原因,尽管在 webpack 配置中进行了正确的模块加载器测试,但 scss 文件甚至没有被考虑或监视。ExtractTextPlugin 似乎已正确配置,对其设置的更改将引发错误。

有人可以帮助理解为什么这不起作用吗?

凯撒

你必须在require/import你的 scss 模块中app.js

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

使用Webpack ExtractTextPlugin获取CSS输出

来自分类Dev

在 Webpack 和 ExtractTextPlugin 中使用 Font Awesome

来自分类Dev

webpack 4 - HMR 不刷新 html 和 scss (ReactJS)

来自分类Dev

ReferenceError:在Webpack中使用ExtractTextPlugin时未定义窗口

来自分类Dev

使用Webpack编译Scss

来自分类Dev

使用webpack处理scss

来自分类Dev

反应webpack scss关闭

来自分类Dev

WebPack 2 嵌套 SCSS

来自分类Dev

Webpack:从SCSS到CSS文件

来自分类Dev

无法使用webpack加载scss

来自分类Dev

React webpack 中的 scss 变量

来自分类Dev

scss 不工作

来自分类Dev

Webpack-导出SASS(.scss)文件

来自分类Dev

网页加载之前的Webpack SCSS“闪烁”

来自分类Dev

Webpack SCSS和Babel配置问题

来自分类Dev

SCSS不编译'@use'语句

来自分类Dev

SCSS循环干扰转换:旋转

来自分类Dev

自动前缀加载器中断Webpack中的scss编译

来自分类Dev

如何使用react webpack设置bootstrap 4 scss

来自分类Dev

Webpack正在处理我的.scss样式表类

来自分类Dev

将webpack(环境)变量传递到scss文件

来自分类Dev

无法使用Aurelia,Scss和Webpack加载Fontawesome字体

来自分类Dev

使用webpack无需js即可编译.scss文件

来自分类Dev

Webpack生成SCSS源映射,但不生成JS

来自分类Dev

webpack配置不适用于我的scss文件:(

来自分类Dev

使用webpack 2将.scss文件提取到.css中

来自分类Dev

angular.cli - Webpack 将 scss 编译为 css

来自分类Dev

Laravel Mix webpack scss在for循环内乘法编译错误

来自分类Dev

尝试使用 webpack 4 从 scss 文件中获取 css 文件