使用Webpack编译Scss

用户818700

我仍在尝试把头放在webpack上,而来自Gulp的确令人困惑。我的项目结构如下:

./root
  -- src
    -- styles.scss
  -- bin
  -- node_modules
  -- webpack.config.js

因此,只是超级简单,我想styles.scsssrc目录中进行编译并将其输出到bin目录中。我安装了以下装载机:

  • 样式加载器
  • CSS加载器
  • sass-loader(也node_sass作为依赖项安装

现在我知道我没有掌握Webpack的一些基本知识,但这是我的webpack.config.js

module.exports = {
    entry: './src/styles.scss',
    output: {
        path: './bin',
        filename: 'styles.css'
    },
    module: {
        loaders: [
            {
                test: /\.scss$/,
                loaders: ["style", "css", "sass"]
            }
        ]
    }
};

当我webpack在目录的根目录中运行时,它看起来可以工作。但是该styles.css文件看起来包含一堆JavaScript代码。所以我不明白,需要澄清。我模糊地猜测,如果您的项目中没有任何JavaScript文件,那么您将无法使用webpack(webpack.config.js当然...之外)

克拉芬博克

我到目前为止还不是webpack专家,但据我了解,这正是webpack应该做的事情,根据它自己的文档:

装载机

webpack只能本地处理JavaScript,但是使用加载程序将其他资源转换为JavaScript。[...]

这意味着,即使仅包含SCSS文件,webpack也会将它们转换为JavaScript文件,然后可以像其他任何JS文件一样将其包含在内。

例如,如果你改变了你styles.css进入styles.js,你会说它是在HTML的用头

<head>
  ...
  <script type="application/javascript" src="styles.js" charset="utf-8"></script>
  ...
</head>

尽管如此,您的CSS尽管被称为并用JavaScript进行了封装,但仍将被正确地视为CSS。

你为什么想做这个?

基本上是将呼叫保存到服务器。Webpack为您提供了将JS,[S] CSS和许多其他东西捆绑到一个JS文件中的机会,您可以通过对服务器的一次调用就可以获取它,从而节省了很多往返时代。尽管如此,浏览器仍将相应地解释所有资源。

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

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

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

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

来自分类Dev

使用webpack处理scss

来自分类Dev

使用Postcss进行Webpack编译失败,因为在node_modules的库中找不到scss文件

来自分类Dev

如何使用 scssphp 编译 SCSS

来自分类Dev

无法使用webpack加载scss

来自分类Dev

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

来自分类Dev

angular.cli - Webpack 将 scss 编译为 css

来自分类Dev

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

来自分类Dev

使用vimscript(vimrc)自动编译Sass \ Scss

来自分类Dev

使用webpack进行更少的编译

来自分类Dev

如何使用webpack编译角度模板?

来自分类Dev

使用 jsx 编译安装 webpack 时出错

来自分类Dev

webpack-dev-server无法重新编译(JS文件和SCSS文件)

来自分类Dev

如何使用grunt-sass编译多个scss文件

来自分类Dev

如何使用node-sass将scss编译为CSS

来自分类Dev

Jekyll不会使用`jekyll serve`来编译scss文件。

来自分类Dev

允许使用ReactJS在scss / css中渲染或编译特殊字符

来自分类Dev

有效的SCSS不能使用Codekit进行编译

来自分类Dev

Jekyll不会使用`jekyll serve`来编译scss文件。

来自分类Dev

如何使用react webpack设置bootstrap 4 scss

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

如何使用 hanami 编译器将 scss 文件导入另一个 scss?

来自分类Dev

反应webpack scss关闭

来自分类Dev

WebPack 2 嵌套 SCSS

来自分类Dev

Babel 使用 Webpack 编译但不使用 Jest

来自分类Dev

使用webpack和babel-loader编译时出错

来自分类Dev

如何使用Webpack 4将sass编译为CSS?

Related 相关文章

热门标签

归档