SASS 未在 React / Webpack 项目中呈现

Posted 2023-02-22

【中文标题】SASS 未在 React / Webpack 项目中呈现

【英文标题】：SASS not rendering in React / Webpack project

【发布时间】：2017-04-25 12:35:08

【问题描述】：

我将 SASS 添加到我的项目中是因为我喜欢将 SASS 用于我的 CSS。在我的 app 文件夹中，我创建了 CSS 文件夹和一个 SCSS 文件夹。我运行 sass --watch scss:css 将我的 scss 更改映射到 css 文件夹。我认为这很好用。在我的 webpack 中，我添加了一个加载器来处理 SCSS 和 SASS，并将所需的文件添加到我的 package.json 中。为了开始使用 SASS 样式，我需要将它们包含在我的 index.html 文件中，还是需要将它们导入到我想将它们与新的 es6 import x from 'xpath' 东西一起使用的每个组件中？

这是我的 package.json 和 webpack.config.js 文件

  "name": "newaccount",
  "version": "1.0.0",
  "description": "a form submission for new accounts",
  "main": "App.js",
  "scripts": 
    "start": "webpack-dev-server"
  ,
  "author": "---",
  "license": "ISC",
  "dependencies": 
    "react": "^15.4.1",
    "react-dom": "^15.4.1",
    "react-hot-loader": "^1.3.1",
    "react-router": "^3.0.0"
  ,
  "devDependencies": 
    "babel-core": "^6.18.2",
    "babel-loader": "^6.2.8",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "css-loader": "^0.26.1",
    "html-webpack-plugin": "^2.24.1",
    "node-sass": "^3.13.0",
    "sass": "^0.5.0",
    "sass-loader": "^4.0.2",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.3",
    "webpack-dev-server": "^1.16.2"
  

webpack.config.js

var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');


var HTMLWebpackPluginConfig = new HtmlWebpackPlugin(
  template: __dirname + '/app/index.html',
  filename: 'index.html',
  inject: 'body'
);

module.exports = 
  entry: [
    './app/App.js'
  ],
  output: 
    path: __dirname + '/public',
    filename: "index_bundle.js"
  ,
  plugins: [HTMLWebpackPluginConfig],
  devServer: 
       inline:true,
       contentBase: './public',
       port: 3333
     ,
  module: 
    loaders: [ 
         test: /\.js$/, 
         exclude: /node_modules/, 
         loader: "babel-loader"
      , 
          test: /\.scss$/,
          include: path.join(__dirname, "app"),
          loaders: ["style", "css", "sass"]
        ,
        
              test: /\.scss$/,
              loader: 'style!css!sass'
            ]
  
;

我的文件结构基本上是一个app文件夹和一个public文件夹。在应用程序内部，您有组件/容器/css/scss/utils，而在公共内部则是 bundle.js 和 index.html 文件。

【参考方案1】：

你不应该在 Webpack 中使用外部 Sass 命令。您需要将 Sass 内容放入 Webpack 的依赖关系图中。为此，请告诉 Webpack 您正在使用这些文件，这是通过 require() 完成的。在需要样式的页面的 javascript 文件顶部，添加

require('./path/to/sass/scss')

在开发模式下，这会将您的 Sass 代码转换为 Javascript，从而将内置的 CSS 规则注入页面。我知道这很奇怪，但它可以让你热重新加载样式。您还应该有一个单独的生产构建 Webpack 配置，使用 ExtractTextPlugin 将构建的 CSS 提取到一个单独的文件中，并将该文件加载到您的生产 HTML 中。

延伸阅读：Webpack: When to Use and Why.

【讨论】：

所以不需要整个scss应用映射到css？我只是编写 sass 文件，并在我想使用的 react 组件 .js 文件的顶部包含 sass 文件？就像 import sassBase from '../app/scss/base/_base.scss' 或者只是 require('../app/scss/base/_base.scss')

你制作的相当不错的 Webpack 指南，也不知道捆绑图片。

正确。 Webpack 应该知道您的应用程序需要运行的所有静态资产。它为您提供安全性并保证您的应用程序需要的所有文件都将加载。与在不存在的 Javascript 文件上调用 require() 的方式相同，会出错并导致构建失败，现在您可以获得图像、css、字体等相同的好处。

如果我尝试从我的组件访问 scss 文件目录，在 ./~/css-loader!./~/sass-loader!./~/ style-loader!./~/css-loader!./~/sass-loader!./app/scss/base/_base.scss 模块构建失败：^“...加载样式”后 CSS 无效：预期 1选择器或规则，在 /Users/sam/Desktop/project/newAccount/app/scss/base/_base.scss（第 1 行，第 1 列）@ ./app/scss/base/ 中为“var content = requi” _base.scss 4:14-263

您需要的 sass 文件是否包含代码 var content=... ？这不是有效的 sass

【参考方案2】：

我的 webpack.config.js 文件加载 scss 和 sass 两次，将其更改为

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

通过删除

     test: /\.scss$/,
     include: path.join(__dirname, "app"),
     loaders: ["style", "css", "sass"]
 ,

现在我可以将我的 SASS 文件包含在我的 react 组件中。现在我需要弄清楚如何访问我的 SASS 文件中的图像 - 似乎会抛出大量错误 =(

【讨论】：

图像的加载方式应与需要任何文件的方式相同，具有本地路径，但使用 url 而不是 require。 background-image: url(./local/path.jpg)