在laravel / vuejs2项目中添加普通的自定义css文件

Question

我正在使用laravel5.4和vuejs2来构建一个小项目。我刚开始用laravel学习vuejs2。使用laravel-mix编译我的资产。在laravel-mix文档中，我似乎无法找到一种方法来添加我自己的普通css文件以进行合并和监视。

我在public / css / custome.css文件中有自己的css规则。我应该在webpack.mix.js文件中写什么，以便我的这个文件被laravel mix包含和观看？目前我在文件中有以下行：

mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');

Answer 1

将您的自定义CSS文件移动到resources/css文件夹，并在webpack.mix.js中写下面的配置

注意：你可能在css中没有resources文件夹，所以只需创建一个。

mix.styles([
'resources/css/custom.css'
], 'public/css')

Answer 2

我找到了Laracast的解决方案，它对我有用。

以下是步骤：

1. 将public / css / custom.css的内容保存在resources / assets / sass / _custom.scss中

您必须将文件扩展名更改为.scss并在开头添加下划线。在主app.scss文件中导入时，下划线将非常有用。

2. 以这种方式将资源/ assets / sass / _custome.scss文件导入资源/ assets / sass / app.scss：

   /* importing _custome.scss from the same directory containing the following files 
      resources/assets/sass/{app.scss, _custome.scss, _variables.scss} */
   
   // import _custome.scss
   @import "custome";
   
   // import _variables.scss (custom variables for bootstrap-sass)
   @import "variables";
   
   // importing bootstrap-sass from node modules (if you are using bootstrap)
   @import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

3. 将其包含在webpack.mix.js文件中

   mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

4. 编译 npm run dev

就这样。