Question

我没有找到解决方案。到目前为止，我看到的唯一可能的结果是Laravel-Elixir-SCSS-Lint，但是当前的下载数量并不表示这是公众的普遍选择。我确实查看了Laravel Mix Extensions page，但那里也没有发现。从来没有想过，Laravel Mix在使用Gulp，Grunt等之前没有皮棉SASS / SCSS会是一个明确的选择。

预先感谢您的帮助。

更新

经过大量挖掘后，我得出以下解决方案，但是棉绒的性能不好，并且会忽略一些错误（最后检查控制台输出）

package.json

{
  "name": "test",
  "version": "1.0.0",
  "description": "Description here.",
  "main": "index.js",
  "scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "hot": "cross-env NODE_ENV=development webpack-dev-server --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "Me",
  "license": "ISC",
  "devDependencies": {
    "aos": "^2.3.4",
    "browser-sync": "^2.26.4",
    "browser-sync-webpack-plugin": "^2.0.1",
    "cross-env": "^5.2.0",
    "laravel-mix": "^4.0.15",
    "postcss-reporter": "^6.0.1",
    "resolve-url-loader": "^3.1.0",
    "sass": "^1.19.0",
    "sass-loader": "^7.1.0",
    "stylelint": "^10.0.1",
    "stylelint-config-recommended": "^2.2.0",
    "stylelint-order": "^3.0.0",
    "stylelint-scss": "^3.6.0",
    "vue-template-compiler": "^2.6.10"
  }
}

webpack.mix.js

let mix = require('laravel-mix');

if (!mix.inProduction()) {
    mix.webpackConfig({
        devtool: 'source-map'
    })
    .sourceMaps()
}

mix
  .copy('libraries/jquery-vide/jquery.vide.min.js', 'dist/js/')
  .copy('libraries/headroom/headroom.js', 'dist/js/')
  .js('src/js/ab2019.js', 'dist/js/')
  .js('src/js/ab2019-vide.js', 'dist/js/')
  .sass('src/sass/style.scss', 'dist/css/')
  .options({
    processCssUrls: false, // Process/optimize relative stylesheet url()'s. Set to false, if you don't want them touched.
    postCss:[
      require("stylelint")({ /* your options */ }),
      require("postcss-reporter")({ clearReportedMessages: true })
    ]
  })
  .browserSync({
    files: "dist/css/style.css"
  })
  .setPublicPath('dist');

.stylelintrc.json

{
  "extends": "stylelint-config-recommended",
  "plugins": [
    "stylelint-order",
    "stylelint-scss"
  ],
  "rules": {
    "block-no-empty": true,
    "declaration-colon-space-after": "always",
    "indentation": [ 2, {
      "message": "Please use 2 spaces for indentation. Tabs make The Architect grumpy.",
      "severity": "warning"
    } ],
    "no-descending-specificity": null,
    "order/order": [
      "declarations"
    ],
    "order/properties-alphabetical-order": true,
    "scss/dollar-variable-colon-space-after": "always-single-line"
  }
}

style.scss

$x:1;

.test {
  color: white;
  background: red
}

.foo {}

a {

}

.bar {
   color:#4fd;
  padding: 10px 0px;
}

控制台输出

$ npm run dev

> test@1.0.0 dev /fake/path
> npm run development


> test@1.0.0 development /fake/path
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

 40% building 7/8 modules 1 active ...e/fake/path/src/sass/style.scss
src/sass/style.scss
32:2  ⚠  Expected background to come before color (order/properties-alphabetical-order) [stylelint]

 70% building 9/10 modules 1 active ...e/fake/path/src/sass/style.scss
src/sass/style.scss
32:2  ⚠  Expected background to come before color (order/properties-alphabetical-order) [stylelint]

 98% after emitting SizeLimitsPlugin

 DONE  Compiled successfully in 1489ms

如何在Laravel Mix上添加SASS / SCSS

更新

0 个答案: