webpack：是不是可以将 SCSS 编译成 CSS？

Posted 2023-02-22

【中文标题】webpack：是不是可以将 SCSS 编译成 CSS？

【英文标题】：webpack: is it possible to just compile SCSS into CSS?webpack：是否可以将 SCSS 编译成 CSS？

【发布时间】：2018-01-28 03:33:25

【问题描述】：

const path = require('path');

module.exports = 
  entry: './src/scss/screen.scss',

  output: 
    filename: 'screen.css',
    path: path.resolve(__dirname, 'dist'),
  ,

  module: 
    rules: [
        
          test: /\.scss$/,
          use: [
          'style-loader',
            'css-loader',
            'sass-loader'
          ]
        ,
      
        test: /\.jpg$/,
        use: [
          'file-loader',
        ],
      ,
    ]
  
;

这是我的webpack.config.js。当我尝试将 SCSS 编译成 CSS 时，它会毫无怨言地创建 screen.css 文件，但 screen.css 包含 javascript 代码（来自我猜的加载器之一）。

当项目实际上没有任何 javascript 文件时，甚至可以使用 webpack 吗？我只有 SCSS 文件和图像。

【参考方案1】：

您应该通过 [ExtractTextPlugin][1] 构建 CSS 文件。

顺便说一句，entry 键仅用于 js 文件。 Webpack 从入口文件中监视 imports 或 requires 并将它们全部构建在一个文件中（我可能会错过一些东西）

你需要安装extract-text-webpack-plugin并要求它

var ExtractTextPlugin = require('extract-text-webpack-plugin')

然后更新你的加载器

rules: [
  
    test: /\.scss$/,
    use: ExtractTextPlugin.extract(
      fallback: "style-loader",
      use: [loader: 'css-loader', 
            loader: 'sass-loader']
    )
  

还有插件

plugins: [
    new ExtractTextPlugin(
        filename: 'styles.css'
    )
]

然而，webpack 需要有一些入口 js 文件。 你可以只添加下一个代码，但不要使用这个 JS 文件

entry: './app.js',

output: 
    path: join(__dirname, '/build'),
    filename: 'bundle.js'

阅读更多关于[条目][2] [1]：https://github.com/webpack-contrib/extract-text-webpack-plugin [2]：https://webpack.js.org/concepts/entry-points/

【讨论】：

与 extract-text-plugin 无关，问题 ivsterr 与 webpack 假设捆绑 js 文件的事实有关，如果在该 js 文件中有导入sass 文件，它将应用 sass-loader。

js 文件中的 sass 导入？真的吗？

是的，为什么不呢？您可以使用 extract-text-plugin 从包中提取样式，但这与这里的问题无关。

正如我所见，他需要使用从 scss 编译的样式构建本机 css 文件。我给了他解决方案，如何去做以及所有人如何去做。为什么不相关？

因为，他抱怨他最后的css文件里有js，原因是我写的，入口点应该是js文件。

【参考方案2】：

您的webpack.config 文件的问题在于您给了它一个scss 文件作为入口点。

Webpack 假设打包了 js 文件，所以你需要指定一些 js 文件，在那里你可以导入一个scss 文件。